html - 如何让文字在图片下方居中？

Question

我有三个 h1 标签，我想将它们与三个图像对齐。我怎样才能做到这一点？我希望文本在图像下方对齐，但我现在的代码有很多偏差。

.column {
  max-width: 960px;
  padding: 0 100px;
}

.container {
  display: flex;
  justify-content: center;
}

.column>h1 {
  display: flex;
  font-family: 'Montserrat-Bold';
  font-size: 30px;
  text-align: center;
}

<div class="container">
  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
    <h1>Design</h1>
  </div>

  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
    <h1>Code</h1>
  </div>

  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design">
    <h1>Collaborate</h1>
  </div>
</div>

Answer 1

.column {
  display: flex;             /* new (1) */
  flex-direction: column;    /* new (2) */
  align-items: center;       /* new (3) */
  max-width: 960px;
  padding: 0 100px;
}

.container {
  display: flex;
  justify-content: center;
}

.column > h1 {
  /* display: flex; <--- remove; not necessary */
  font-family: 'Montserrat-Bold';
  font-size: 30px;
  text-align: center;
}

<div class="container">
  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
    <h1>Design</h1>
  </div>
  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
    <h1>Code</h1>
  </div>
  <div class="column">
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design">
    <h1>Collaborate</h1>
  </div>
</div>

注意事项:

1. 将 img 和 h1 元素的父元素设为 flex 容器。
2. 垂直堆叠 flex 元素。
3. 水平居中 flex 元素。