我已经很久没有使用HTML或CSS了。我试图添加3-4个图像在一个水平线连同一些文字下面的每一个。我希望每个图像+文本的间距均匀，也有他们的垂直堆栈时，浏览器是调整大小。最好的办法是什么？我现在的代码完全是垃圾，老实说，我不知道从哪里开始。

<style><!--
#container {
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150%;
  height: 125%;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

--></style>
<div id="container">

<div class="box1"><img src="img" /><b text-align="center">Test for bold header</b><br />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box2"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box3"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box4"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>
 
<span class="stretch"></span></div>

我确信有一种更简单的方法可以做到这一点，不需要我拼凑的所有这些垃圾代码。我试图在“why it working”

如有任何帮助或指导，不胜感激。

顺晟科技：

您可以在flex父级上使用，然后在每个flex子级图像中添加一个并设置为将文本放置在每个图像下面，然后将每个元素放置在图像开始和结束的相对位置。添加一个与要放在初始行中的元素的百分比相等的元素。

编辑：为最大屏幕大小500px添加了媒体查询，以显示当屏幕大小一定时如何将图像堆叠在一起。

而不是使用和

标签的文本使用图标题，它将自动中心的文字下方的图像。 对于均匀间距的水平和垂直堆叠图像，使用Display：flex和flex-direction属性。也请参见justify-content和align-items属性以获得相等的空格。

引用:

1. 图标题:https://www.w3schools.com/tags/tag_figcaption.asp
2. Flex属性:https://www.w3schools.com/cssref/css3_pr_flex-direction.asp