I am trying to center 3 divs horizontally with 1 button centered in each div as well. I currently have these divs centered vertically with the buttons centered within them, but at a certain screen width I need the divs to switch from vertical placement to horizontal placement.

<div >
    <div  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 >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >Clothing</button></a>
      </div>
    </div>
    <div  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,900&ssl=1" alt="Image cannot be displayed"/>
      <div >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >Accessories</button></a>
      </div>
    </div>
    <div  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 >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >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;
}

I have tried to "display: flex;" the "product-wrapper" and a bunch of other alternatives, but nothing is working. I have tried using a media query to get the desired result using the code below...

@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;
 }
}

CodePudding user response：

Make note of CSS and HTML changes I made below:

.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 >
    <div  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 >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >Clothing</button></a>
      </div>
    </div>
    <div  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,900&ssl=1" alt="Image cannot be displayed"/>
      <div >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >Accessories</button></a>
      </div>
    </div>
    <div  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 >
        <a href=""><button data-aos="fade-right" data-aos-duration="800"  >Shoes</button></a>
      </div>
    </div>
</div>

CodePudding user response：

If you want the buttons centered in the image you could add

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