html - 将两个图像并排居中并带有标题

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

我已经尝试过 figure 和 figcaption 标签，它们只让一张图片位于中心。

Answer 1

使用 HTML5 figure 元素包裹每个图像，然后在每个图像中添加一个 figcaption 元素来构造您的标题。

您可以将图形的 display 属性设置为 inline-block 以使它们彼此相邻显示，然后将它们设置为类似于您当前的样式使用您的 .pic 类设置图像样式。