如何使用字幕和描述对三个图像进行居中? HTML

问题描述 投票:0回答:1

我是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>

此代码创建图像并使其居中,但如果字幕或描述不完全相同,则图像将偏移(EX:如果最左侧图像上的标题非常冗长,则该图像将显示为高于其他两个图像) 。有没有什么办法解决这一问题?

html css web webpage
1个回答
3
投票

你应该尝试使用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;
}
© www.soinside.com 2019 - 2024. All rights reserved.