Centering text and buttons under images - css

Question

I am trying to center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img {
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
}
figure figcaption {
display: inline-block;
float: left;
}
figcaption {
font-size: 17px;
margin: 30px 110px 30px 60px;
}
figure button {
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
}
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>

Answer 1

You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure {
text-align: center;
width: 20%;
float: left;
}
img {
max-width: 100px;
border: 10px solid #a8eb6c
}
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>

Answer 2

Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent {
text-align: center;
vertical-align: top;
}
figure {
display: inline-block;
}
figure .centerContent {
width: 28%;
display: inline-block;
}
figure div img {
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
}
figcaption {
}
figure div button {
background-color: #a8eb6c;
}
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>
Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,

Answer 3

I hope this helps! I have used flex and wrapped a div around each element
figure img {
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
}
figure figcaption {
display: inline-block;
text-align: center;
}
figcaption {
font-size: 17px;
margin: 30px 110px 30px 60px;
}
figure button {
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.center{
text-align: center;
}
.main_container{
display: flex;
justify-content: center;
align-content: center;
}
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>