如何将带有标题和描述的三张图片居中？ HTML

Question

我是 HTML 的新手，我正在尝试创建一个包含三个居中图像（并排显示）的网页。这是我的代码：

<center>
<figure style="display:inline-block;text-align:center;top:350px">
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block">
    <img src="images/website-main1.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">This is an example of a super long caption that will make the images offset</figcaption>
    <div style="text-align:left">
    <p>description example</p>
    </div>
    </div>
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block">
    <img src="images/website-main6_1.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">First image</figcaption>
    <div style="text-align:left">
    <p>description</p>
    </div>
    </div>
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block;">
    <img src="images/a1_orig.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">First image</figcaption>
    <p>description</p>
    </div>
</figure>
</center>

此代码创建图像并将它们居中，但如果标题或描述不完全相同，图像将会偏移（例如：如果最左边图像上的标题非常冗长，则该图像会显得更高比其他两个）。有办法解决这个问题吗？

Answer 1

您应该尝试使用 CSS！维护您的 HTML 非常容易。

您还应该考虑使用 Flexbox。

我已经为你做了一个演示：https://jsfiddle.net/djzyvtvh/1/

在所有图片和标题周围添加 DIV，如下所示：

.container {
  display:flex;
  width:90%;
  margin:0 auto;
}

使用：display:flex 启用 Flexbox。

然后给每个盒子一个flex:1属性，所以每一项都是相等的：

.box {
  flex:1;
  margin:0 4px;
}

如何将带有标题和描述的三张图片居中？ HTML

How to center three images with captions and descriptions? HTML

html

css

webpage

web