尝试使用 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>

Answer 1

Flex 容器的初始设置是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%。这将强制第二个弹性项目换行到下一行。

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