将两个图像与标题并排居中

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 类设置图像的样式。