如何通过更改字体大小垂直居中块元素中的文本？

Question

我垂直居中文本的常用方法是使用等于容器高度的行高。

因此，容器有

height: 60px;
line-height: 60px;

并且子元素有

line-height: 60px;

有效。但是如果你将font-size增加到1em之上，就会让它变得混乱。更糟糕的是，浏览器在执行操作方面不一致！

这是一个JSFiddle演示： http://jsfiddle.net/tgv2rx7f/7/ 。请注意，在Firefox中大的“A”。太靠近容器的顶部。它在演示中看起来并不那么糟糕，但在我的实际网站上它非常引人注目并且分散注意力。如果你在Firefox中修复它，那么它在Chrome中太低了。

无论我做什么，我都无法让这一点始终如一。我玩过不同的vertical-align值，top，text-top，middle ...没有骰子。如果我将容器更改为display:inline，我可以让它工作，但在我的布局中，它必须是block或inline-block。

PS，我不能使用弹性盒。

编辑：这就是我所看到的，无论是在我的实际网页（蓝色）还是在JSFiddle（绿色）中。

Chrome：

• 

Firefox：

• 

编辑2 ：感谢andyb指出使用em s将使用px更改容器集的大小这一事实。它还有助于揭示另一个复杂因素，即浏览器对字体大小和高度的处理方式不同，但这似乎超出了这个问题的范围，所以我创建了一个关于该主题的新问题（here）并标记为{{1答案被接受了。

Answer 1

在container和b块上，line-height和font-size会导致块的高度发生变化。 line-height和font-size互相交流！ line-height是容器中文本行之间的垂直距离。因此，对于line-height:60px和font-size:2.5em，容器的高度增加到73px。这可以通过容器上的硬height:60px在CSS中解决，但这不会影响文本 baseline 。文字“1”如果基线发生变化，容器中将向上或向下移动。如果.a上的字体大小增加，则基线会下降，拖动文本“1”。下。你可以通过转动所有垂直对齐并增加.a和“1”的字体大小来检查这一点。内容向下移动。考虑到这一点，我们应该只需要修复容器的垂直对齐，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}

<a href="#" class="container">
  1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>

但是基线仍然是A的底部，因为A是正常流程中的最后一个容器，请参阅：

只要.b字体大小小于.a，基线就会与.a保持一致，请参阅.b上字体较小的下一张图片：

但是，请注意.b容器已继承line-height:60px - 请参阅Why does this inline-block element have content that is not vertically aligned，因此高度正确，我们可以vertical-align .b到容器顶部相同的高度，因此导致文本中间对齐，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}
.b {
  display: inline-block;
  font-size: 23px;
  vertical-align: top;
  font-family: sans-serif;
  text-align: center;
}

<a href="#" class="container">
1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>