如何将文本居中放置在图像下方？

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>

- Jordan Baron

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

   元素的父级设置为 flex 容器。

2. 垂直堆叠 flex 项目。
3. 水平居中 flex 项目。

- Michael Benjamin

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文本，因为它纯粹是用于装饰的。

- scottohara

Answer 3

从 h1 中删除 display:flex 并按以下方式进行样式设置

下面是代码片段

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

- repzero

Answer 4

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

首先，给图片设置宽度，宽度以列宽的百分比为准，然后通过左右边距自动居中在您的 div 中。接着，通过设置 text-align:center 居中您的标题文本在图像下方的列中。这是一个想法，上面是代码。

- Osama

---

需要在这里添加更多关于你正在做的事情的信息。 - flamusdiu