垂直对齐的行内块元素未在容器内完美居中

Question

我正在尝试使用vertical-align: middle将某些文本中的inline-block元素垂直居中。

 p { background: red; line-height: 20px; display: block; } span { height: 18px; width: 18px; display: inline-block; background: lightblue; vertical-align: middle; }

 <p> <span></span> &lt;-- Not perfectly aligned </p>

请注意，元素没有完全居中……这是为什么？ 这是浏览器一对一问题吗？ 它在 WebKit 浏览器（Chrome、Safari）上重现。

Answer 1

vertical-align: middle; 从来没有打算将元素居中。 这是一个更简单的例子，可以更好地理解：

 p { background: linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */ red; line-height: 80px; font-size:80px; display: block; } span { height: 18px; width: 18px; display: inline-block; background: lightblue; vertical-align: middle; }

 <p> <span></span> &lt;-- Not aligned </p>

将元素的中间与基线加上父^ref的 x 高度的一半对齐

相关问题了解更多详情：

如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别？

垂直对齐不适用于内联块

垂直对齐对齐除 self 之外的所有内容

https://stackoverflow.com/a/54190413/8620333

Answer 2

您的代码有注释，文本不在跨度内。 尝试这个：

<p>
  <span>Not perfectly aligned</span>
</p>


p {
  background: red;
}

span {
  display: inline-block;
  background: lightblue;
  vertical-align: top;
}