使用 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>中来修复它。 不确定，为什么它解决了问题，或者它是否是解决问题的好方法。 但它成功了。