Centering two images side-by-side with captions
I am making a web page and I want to have two images in each one with captions below them. I already have images like these created, I just need the captions:
<div class = "container">
<img class = "pic" src = "palibutt.jpg">
<img class = "pic" src = "aaah_lionpali.jpg">
<img class = "pic" src = "fantapali.jpg">
<img class = "pic" src = "paliworshipsun.jpg">
<img class = "pic" src = "dawpali.jpg">
<img class = "pic" src = "omgpali.jpg">
<img class = "pic" src = "paliberries.jpg">
<img class = "pic" src = "olderpaliberries.jpg">
<img class = "pic" src = "ipadpali.jpg">
<img class = "pic" src = "palinormal.jpg">
</div>
.pic {
border-radius:100px;
padding:10px;
width:550px;
}
.container{
text-align:center;
}
I already tried picture tags and figcaption, they only made one image in the center.
source to share
Use an HTML5 element figure
to wrap each image, then add an element figcaption
inside each to copy your captions.
You can set the display
pictures property to a value inline-block
so that they appear next to each other, and then style them similar to how you are currently drawing pictures using the class .pic
.
source to share