我如何将文本集中在图像下方

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. 水平中心弹性项目。

Answer 2

您不需要标题上的display: flex。这部分是要怪的。

相反，您要考虑：

.heading {
text-align: center;
}
.heading span {
  display: block;
  margin-top: 6px;
}

<h1 class="heading">
  <img src="http://placehold.it/350x150" alt="" />
  <span>Title Text</span>
</h1>

通过将图像放置在标题中，可见文本充当图像的标签，因此您无需添加其他ALT文本，因为它纯粹是在那里进行装饰的。

Answer 3

取出显示：flex from h1和样式如下

下面的摘要

.column {
  max-width: 960px;
  padding: 0 100px;
}
.container {
  display: flex;
  justify-content: center;
}
.column>h1 {
  font-family: 'Montserrat-Bold';
  font-size: 30px;
  text-align: center;
  border: solid red;
  margin-top: 0;
}
img {
  border: solid blue;
}
.column>h1 {
  margin-bottom: 0;
  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 4

.column img{width:80%; margin-left:auto; margin-right:auto;}
.column h1{text-align:center;}

首先给出IMG，它是宽度，宽度是从列宽的百分比，然后在左右右图的情况下，它将通过给出您的div中心，然后给出文本主修：中心您将居中hedear的文本。图像在此处的列中，我们的想法及以上是代码。