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

Posted 2023-03-05

【中文标题】尝试使用 flexbox 对齐图像下的文本

【英文标题】：Trying to align text under an image using 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-***-12046.herokuapp.com/">
    <img class="project1" src="./images/featuring.png"  />
  </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>

【参考方案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 */