需要在 HTML 中水平居中 3 個 div

Question

我正在嘗試將 3 個 div 水平居中，每個 div 中也有 1 個按鈕居中。 我目前將這些 div 垂直居中，按鈕在其中居中，但在一定的屏幕寬度下，我需要 div 從垂直放置切換到水平放置。

<div class="product-wrapper">
    <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800">
      <img src="https://cdn.shopify.com/s/files/1/0162/2116/files/Untitled_design_32.jpg?v=1530025943" alt="Image cannot be displayed"/>
      <div class="product-button">
        <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Clothing</button></a>
      </div>
    </div>
    <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800">
      <img src="https://i0.wp.com/thehust.com/wp-content/uploads/2021/02/7-Best-Style-Rules-For-Men-to-Follow-Mens-Guide-To-Accessories.jpg?fit=1600%2C900&ssl=1" alt="Image cannot be displayed"/>
      <div class="product-button">
        <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Accessories</button></a>
      </div>
    </div>
    <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800">
      <img src="https://ae01.alicdn.com/kf/HTB1qXa.X.jrK1RkHFNRq6ySvpXaE/Formal-Men-s-Pointed-Toe-Dress-Shoe-Wedding-Shoes-for-Men-2019-Spring-Patent-Leather-Suit.jpg" alt="Image cannot be displayed"/>
      <div class="product-button">
        <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Shoes</button></a>
      </div>
    </div>
</div>


.product-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  height: auto;
  margin: 100px auto 30px auto;
}
.product-wrapper-item {
  background: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 350px;
  margin-bottom: 30px;
}
.product-wrapper-item img,
.product-wrapper-item .product-button {
  position: absolute;
}
.product-wrapper-item .product-button {
  display: flex;
  flex-direction: column;
}
.product-wrapper-item .product-button .product-button-buy:not(:last-child) {
  margin-bottom: 5px;
}

我試過“顯示：彈性；” “產品包裝器”和許多其他替代方案，但沒有任何效果。 我嘗試使用媒體查詢來使用下面的代碼獲得所需的結果......

@media only screen and (min-width: 1001px) and (max-width: 1500px) {
 .product-wrapper {
   display: flex;
   flex-direction: row;
   width: 30%
 }
 .product-wrapper-item {
   background: white;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 350px;
   margin-bottom: 30px;
 }
}

Answer 1

記下我在下面所做的 CSS 和 HTML 更改：

 .product-wrapper { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; gap: 1em; align-items: center; width: 100%; height: auto; }.product-wrapper-item { background: white; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }.product-wrapper-item { display: flex; flex-direction: column; } img { max-width: 100%; } @media only screen and (max-width: 1200px) {.product-wrapper { flex-direction: row; flex-wrap: nowrap; }.product-wrapper-item { background: white; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; } }

 <div class="product-wrapper"> <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800"> <img src="https://cdn.shopify.com/s/files/1/0162/2116/files/Untitled_design_32.jpg?v=1530025943" alt="Image cannot be displayed"/> <div class="product-button"> <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Clothing</button></a> </div> </div> <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800"> <img src="https://i0.wp.com/thehust.com/wp-content/uploads/2021/02/7-Best-Style-Rules-For-Men-to-Follow-Mens-Guide-To-Accessories.jpg?fit=1600%2C900&ssl=1" alt="Image cannot be displayed"/> <div class="product-button"> <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Accessories</button></a> </div> </div> <div class="product-wrapper-item" data-aos="fade-up" data-aos-duration="800"> <img src="https://ae01.alicdn.com/kf/HTB1qXa.X.jrK1RkHFNRq6ySvpXaE/Formal-Men-s-Pointed-Toe-Dress-Shoe-Wedding-Shoes-for-Men-2019-Spring-Patent-Leather-Suit.jpg" alt="Image cannot be displayed"/> <div class="product-button"> <a href=""><button data-aos="fade-right" data-aos-duration="800" class="image-buttons-style" >Shoes</button></a> </div> </div> </div>

Answer 2

如果您希望按鈕在圖像中居中，您可以添加

.product-button{
   position: absolute;
   left: auto;
   top: auto;
}