vertical-align在大写文本上不能正常工作

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。

我认为它总是将文本置于中心位置，假设可能性较高的角色为中心......但我想仅考虑使用过的角色来使当前文本居中。

有办法吗？

NB：使用CSS表无法解决问题。

Answer 1

每个浏览器仅为字体设置一个基线。它不关心你是否使用大写字母。所以很自然地，并不是每个字母都可以完全居中，因为它们具有不同的高度和下降点。

垂直对齐更接近“值”。当您设置 vertical-align：top; 时，并非所有字母都会对齐到顶部并碰撞顶部边框，而只是字体的基线。

Answer 2

以下是代码：

<div><span>ACEOU</span></div>
<div><span>aceou</span></div>

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

希望这会有所帮助：）

Answer 3

我认为这会有诀窍：让line-height跨越而不是div。

<强> HTML：

<div><span>ACEOU</span></div>
<div><span>aceou</span></div>

<强> CSS：

div {
  outline: 1px solid red;
  height: 31px;
  //vertical-align: middle;
  width: 400px;
  float: left;

}
span {
  line-height: 31px;
}

链接：http://codepen.io/anon/pen/oXNOPb

Answer 4

您可以尝试的一件事是为每个line-height设置不同的span。这是一个令人难以置信的繁琐解决方案，并且无法保证它会在不同的浏览器和/或操作系统中为您提供完全相同的结果（对像素）。

示例

＆＃13;

＆＃13;

div{
  border:1px solid red;
  box-sizing:border-box;
  float:left;
  height:33px;
  width:25%;
}
span{
  display:inline-block;
  text-indent:5px;
  vertical-align:middle;
}
div:first-of-type span{
  line-height: 31px;
}
div:last-of-type span{
  line-height: 28px;
}

＆＃13;

<div><span>ACEOU</span></div>
<div><span>aceou</span></div>

＆＃13;

＆＃13;

＆＃13;