尝试使用没有 flex-direction 列的 flexbox 对齐图像下的文本

Question

所以我想把我的文字放在图像下面，而不改变从行到列的弹性方向。

这是我的代码

.img-totm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.img-totm img {
  height: 300px;
  width: 400px;
  padding: 20px 20px 10px 0px;
}

.img-totm h2 {}

<div class="img-totm">
  <img src="images/img-berryblitz.jpg" alt="">
  <h2>Fall Berry Blitz Tea</h2>
  <img src="images/img-spiced-rum.jpg" alt="">
  <img src="images/img-donut.jpg" alt="">
  <img src="images/img-myrtle-ave.jpg" alt="">
  <img src="images/img-bedford-bizarre.jpg" alt="">
</div>

Answer 1

• 将您的图像包裹在显示为弹性列并居中对齐的 div 中。然后你就会得到答案，但你应该知道你的图像尺寸有点大，所以如果视口很小，它们可能会溢出到下一行显示为弹性列。
• 此外，使用间隙而不是填充来在图像之间放置空格。

.img-totm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-totm img {
  display: block;
  height: 200px;
  width: 200px;
}

.img-totm h2 {
  display: block;
  font-size: 1rem;
}

<div class="img-totm">
  <div class="img-container">
    <img src="https://loremflickr.com/200/200/bee" alt="">
    <h2>Fall Berry Blitz Tea</h2>
  </div>

  <img src="https://loremflickr.com/200/200/dog" alt="">
  <img src="https://loremflickr.com/200/200/frog" alt="">
  <img src="https://loremflickr.com/200/200/street" alt="">
  <img src="https://loremflickr.com/200/200/cat" alt="">
</div>