如何将图像置于图像下方？

Question

我有三个h1标签，我希望与三个图像对齐。我怎样才能做到这一点？我希望文本在图像下对齐，但我现在的代码已经过了很多。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：

1. 将img和h1元素的父级设为灵活容器。
2. 垂直堆叠弹性项目。
3. 水平居中展示项目。

Answer 2

您不需要标题上的display: flex。这部分归咎于此。

相反，你会想要考虑：

＆＃13;

＆＃13;

.heading {
text-align: center;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

通过将图像放置在标题中，可见文本充当图像的标签，因此您不需要添加其他替代文字，因为它纯粹用于装饰。

Answer 3

取出显示：从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

z

首先给出img它的宽度是从列宽度的百分比然后左边和右边的自动它将在你的div中居中然后通过给出text-align：center你将你的hedear的文本居中在你的下面在这里的图像我们的想法和上面是代码。