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

我有三个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>

最佳答案

.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>

笔记：
使img和h1元素的父元素成为flex容器。
垂直堆叠弹性项。
水平居中弯曲项目。

关于html - 如何在图片下方居中放置文字？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43562894/