代码之家 › 专栏 › 技术社区 › user2974848

如何使用标题和描述将三幅图像居中?HTML

webpage web css html

user2974848 · 技术社区 · 8 年前

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

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

1 回复 | 直到 8 年前

cmp 8 年前

你应该尝试使用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;
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前