使用 flex 垂直對齊項目會拉伸子元素

Question

我在 flex 容器中有多個子元素 ( span )，並希望使用align-items: center垂直對齊它們：

<div class="w-full mb-1 flex items-center">
    <span class="border borderHighlight px-1" style="font-size: 0.6rem;">{{ badgeTitle }}</span>
    <span class="colorGray01 subText ml-1">&#183; {{ commentTimeStamp }}</span>
    <span class="negative subText font-extrabold text-sm ml-2">&bull;</span>
    <span>&#10003;</span>
</div>

如果沒有 flexbox 類，第一個 span 元素的邊框將適合元素本身。 使用 flexbox 邊框拉伸到其中一個子元素的最大高度。

我將如何保持子元素的原始大小並將其垂直居中對齊？

對於那些不習慣 Tailwind 的人，父元素上的樣式字面意思是：

display: flex;
align-items: center;
width: 100%;
margin-bottom: 1rem;

根本沒有影響此的子元素上的 styles。 只是一些顏色/字體樣式和邊距/填充。 這更像是一個一般性的 css 問題。

Answer 1

通過將<span> -Element 包裝在另一個<span>中來修復它。 不確定，為什么它解決了問題，或者它是否是解決問題的好方法。 但它成功了。