Nesting buttons under divs - html

Question

I am trying to have buttons centered below divs...very new at coding and working my way through courses. Ideally, the buttons would be responsive and follow the divs, wherever they may be (my code could be messy, not sure, sorry if it is :P) any tips?
.items {
height:20rem;
width:20rem;
background-color:#7FDEFF;
display:inline-block;
margin:4em;
display:center;
}
.items:hover {
background-color: #9ce5ff;
}
<section id="sale">
<div class="items"></div>
<button class="buy">Add to Cart</button>
<div class="items"></div>
<button class="buy">Add to Cart</button>
<div class="items"></div>
<button class="buy">Add to Cart</button>
</section>
</body>
</html>

Answer 1

You may try to wrap each one with a wrapper element (.content-wrapper).
You can check the code below.
.items {
height:20rem;
width:20rem;
background-color:#7FDEFF;
margin:4em;
}
.content-wrapper{
display:flex;
flex-direction:column;
width:20rem;
align-items:center;
}
<section id="sale">
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
</section>

Answer 2

You can also do it without using flex, see below:
.column {
text-align:center;
margin-bottom: 1rem;
padding: .5rem;
width: 10rem;
}
.items {
width: 100%;
background-color: #7FDEFF;
padding: 40px 0px;
margin-bottom: 10px;
}
.items:hover {
background-color: #9ce5ff;
}
<section id="sale">
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
</section>
The important steps are to
have text-align: center in the parent div
define a width for the parent div
define the child-div's width as 100% (thereby spreading to parent-div's width)
provide two values for child-div's padding. The first one (40px) makes sure there is some visible vertical space in the div, the second one (0px) makes it fill out the parent div horizontally.