如何均匀排列图像并在其下方添加文本

Question

自从我不得不使用 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>

我确信有一种更简单的方法可以做到这一点，它不需要我拼凑的所有这些废话。我试图在“为什么有效”部分下模仿类似 https://tomorrowslaundry.co/pages/essentials-club-welcome?sscid=81k5_bf9d1& 的内容

任何帮助或指导将不胜感激。

Answer 1

而不是使用和

文本标签使用无花果标题，它将自动将文本居中放置在图像下方。 要以均匀间距水平和垂直堆叠图像，请使用 display: flex 和 flex-direction 属性。另请参阅 justify-content 和 align-items 等间距属性。

参考：

1. 图说明：https://www.w3schools.com/tags/tag_figcaption.asp
2. 弹性属性：https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

Answer 2

您可以在 flex 父级 上使用 display: flex，然后在每个 flex 子级 上添加一个 @987654322 @ 并设置为 flex-direction: column; 将文本放置在每个图像下方，然后用 justify-content: space-between; 分隔以将每个 flex child 元素放置在相对的 start和 flex 父级 图像的结束。添加一个max-width，等于您希望放置在初始flex parents行中的元素的百分比。

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  padding: .5rem;
}

.box2~.box2 {
  margin-left: .2rem;
}

.box2 {
  display: flex;
  max-width: 25%;
  height: auto;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 500px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
  }
  .box2 {
    display: flex;
    max-width: 100%;
    height: auto;
  }
  
  .box2 ~ .box2 {
    margin-top: 1rem;
  }
}

<div class="container">
  <div class="box2">
    <img src="https://placeimg.com/200/100/any">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
  <div class="box2">
    <img src="https://placeimg.com/300/100/any">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
  <div class="box2">
    <img src="https://placeimg.com/250/100/any">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
  <div class="box2">
    <img src="https://placeimg.com/150/100/any">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
</div>