My goal is to align the text underneath each image and center the buttons below them. I've tried adjusting paddings and margins, but it's not solving my issue. Can someone confirm if I am correctly using the button and figcaption tags?
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>