为什么这个粗体文本不尊重CSS vertical-align：middle

Question

我有一堆文字和图像在一行，我想垂直对齐。这一切似乎都有效，除了我刚添加了一些粗体文本，粗体文本似乎比常规文本略低一些。

这是截图：

这是一个简单的html视图：

<span class="midAlign">
    Filter: [<b>Apps: </b>My App Name ]
</span>

这是我的css：

  .midAlign * {vertical-align: middle;}

如果我删除粗体标记，它似乎正确排列：

Answer 1

问题是仅.midAlign * 适用于<b>元素。只需删除*即可解决问题。

Answer 2

我在一行中有一堆文字和图片

因此，当您使用.midAlign *时，它适用于所有元素，因此您不需要将该属性应用于所有元素，只需使用img，所以使用

.midAlign img {
   vertical-align: middle;
}

它将解决问题。

Demo

此外，当您使用*选择器时，它会影响性能，您正在使用它，因为这个特殊情况没有充分理由。

---

我会解释你为什么会这样。 b和img都是内嵌元素，因此当您应用vertical-align: middle;时，它会将元素与基线对齐，所以说我们有img和b标记，因此考虑到元素的整个高度，b将在中间垂直对齐 ...请参阅

---

因此，当您使用middle作为值时，它是中间但是，对于整个元素高度而不仅仅是您的文本

Demo

所以从技术上讲，你的b代码是垂直对齐的，但只是你不必对齐它，所以使用特定的元素选择器而不是通用的*选择器。