尝试使用 flexbox 对齐图像下的文本答案

【问题标题】：Trying to align text under an image using flexbox尝试使用 flexbox 对齐图像下的文本
【发布时间】：2017-03-28 19:08:41
【问题描述】：

我正在尝试在图像下方对齐 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>

【问题讨论】：

标签： html css alignment flexbox

【解决方案1】：

检查这个fiddle

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

使用flex-direction: column;

【讨论】：

【解决方案2】：

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

如果您希望它们垂直堆叠，请使用 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 */
}

【讨论】：