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容器的子级将水平对齐。

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

Answer 2

检查此fiddle

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

使用flex-direction: column;

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

2 个答案: