Currently working on developing a webpage, I am aiming to have two images in each row with captions positioned beneath them. The images are already configured as follows, I just require 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;
}
Experimented with using the figure and figcaption tags, however, it resulted in only one image being centered.