html - 垂直对齐在非大写文本上不能正常工作

Question

我正在尝试垂直对齐两个文本，并牢记像素完美。

一个是完全大写的，另一个不是。

http://codepen.io/FezVrasta/pen/EjxJoz

div {
  outline: 1px solid red;
  height: 31px;
  width: 400px;
  float: left;
  line-height: 31px;
}
span {
  display: inline-block;
  vertical-align: middle;
}

如您所见，大写文本完全居中(上方 20px，下方 20px)。

另一个，上面有 26px，下面有 19px。

我认为它总是将文本居中，假设较高的可能字符为中心......但我想将当前文本居中，只考虑使用的字符。

有办法吗？

注意:使用 CSS 表格无法解决问题。

Answer 1

每个浏览器只为字体设置一个基线。它不在乎你是否使用大写字母。所以自然不是每个字母都可以完全居中，因为它们有不同的高度，也许还有下降部分。

垂直对齐更像是一个“接近”的值。当您设置 vertical-align: top; 时，并不是所有的字母都会对齐到顶部并撞到上边框，只有字体的基线会这样做。