将两张图片 side-by-side 居中并附上说明文字

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 class.

将两张图片 side-by-side 居中并附上说明文字

Centering two images side-by-side with captions

html

css

row

image

center