将两个图像与字幕并排放置

Question

我正在制作一个网页，我想要一行两个图像，每个图像下面都有标题。我已经设置了这样的图像，我只需要标题：

<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;
}

我已经尝试了图形和figcaption标签，它们只使一个图像位于中心。

Answer 1

使用HTML5 figure元素打包每个图片，然后在每个图片中添加figcaption元素以拼写您的字幕。

您可以将数字的display属性设置为inline-block，以使它们彼此相邻，然后将它们设置为类似于您当前使用{设置图像样式的方式{1}}上课。