尝试使用Flexbox将文本对齐到图像下方

Question

我想把一个 p 标签放在一张图片下面。这应该很简单，但我已经试了一会儿，可能是没注意到什么。这是我的代码:

.project {
  display: flex;
  justify-content: center;
  vertical-align: top;
  text-align: center;
}
.project1 {
  height: 10rem;
  width: auto;
  border: 5px solid rgba(52, 73, 94, 1);
}
.project1info {
  background: rgba(52, 73, 94, 1);
  text-align: center;
  display: block;
}

<div class="panel">
  <h1 class="subHead">Some Projects I Have Worked On</h1>
  <h2 class="description"></h2>
</div>
<div class="project">
  <a href="https://hidden-brook-12046.herokuapp.com/">
    <img class="project1" src="./images/featuring.png" alt="" />
  </a>
  <p class="project1info">
    Featuring allows a user to search a musical artist and view a list of collaboraters they have worked with.
  </p>
</div>

- Mshark

Answer 1

一个弹性容器的初始设置是 flex-direction: row。这意味着弹性容器的子项将水平对齐。

如果您想要垂直堆叠它们，请使用 flex-direction: column 覆盖默认值。

.project {
  display: flex;
  flex-direction: column; /* NEW */
  justify-content: center;
  vertical-align: top;
  text-align: center;
}

如果出于任何原因，您需要保留具有flex-direction: row的容器，则可以添加flex-wrap: wrap并将第一个 flex 项的宽度设置为 100%。这将强制第二个 flex 项换行到下一行。

.project {
  display: flex;
  flex-wrap: wrap; /* NEW */
  justify-content: center;
  vertical-align: top;
  text-align: center;
}
.project > a {
  flex: 0 0 100%;  /* NEW */
}

- Michael Benjamin

Answer 2

请查看这个fiddle。

.project {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

使用 flex-direction: column;

- GvM