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

Posted 2023-03-05

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

【英文标题】：Centering two images side-by-side with captions

【发布时间】：2015-06-26 02:43:27

【问题描述】：

我正在制作一个网页，我想要一排两张图片，每张图片下方都有说明文字。我已经像这样设置了图像，我只需要标题：

<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 标签，他们只让一张图片在中心。

【问题讨论】：

尝试给容器一个宽度等于并排的两个图像（加上边距和填充），然后将容器的边距设置为自动。 .containerwidth:1140px; margin:auto;.

【参考方案1】：

使用 html5 figure 元素来包装每个图像，然后在每个图像中添加一个 figcaption 元素来配置您的标题。

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

【讨论】：

我试过了，但我想连续有两个图像，当我这样做时，它只允许我连续有一个图像。知道如何解决这个问题吗？

要么将figure 元素的display 属性更改为inline-block，使用浮点数或试试flexbox。

哦，更改图形元素的显示属性有效，谢谢！

不客气。我已经更新了我的答案以包含该信息。如果我对您的问题的回答令您满意，请您接受我的回答好吗？ :)