html - Flexbox 垂直居中第一项已修复

Question

我有一个包含 FontAwesome 图标和短文本的 div。

.box{
  display:flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  <i>Icon</i>
  <p>Text</p>
</div>

当文本达到一定长度时，它会转到下一行，并且图标会向上移动一点，所有内容都居中。

当我有多个这些 .box div 并排放置时，我希望图标彼此保持对齐，无论下面的文本有多长。

标签： htmlcssflexboxfont-awesome

Answer 1

我通过在文本上使用最小高度来解决它。