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 並排時，我希望圖標保持彼此對齊，無論下面的文本有多長。

Answer 1

.box > i {
    min-height: 30px;
}
.box > p {
    flex: 1;
}

Answer 2

我通過在文本上使用最小高度來解決它。