基于x高度的垂直对齐

Question

当试图将内容集中在一个容器中时,CSS-Tricks有一个很好的指南.然而,当试图垂直居中一些略小于其容器的文本时,我认为垂直居中文本的另一种方式可能更可取.而不是使用字体的整个高度,我宁愿基于字体的x高度(基本上是小写x的高度)居中它

请参阅此示例,其中红色基于整个高度,绿色基于x高度

我能想到的唯一选择是在文本中添加一个与容器高度相同的伪元素,并使用vertical-align:middle.

.pseudo {
  white-space: nowrap;
}

.pseudo:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100px;
  width: 0;
}

这可行,但不幸的是只有一行.我想知道是否有其他人试图解决这个问题,是否有最好的做法可以遵循？我特别感兴趣的是使用尽可能少的"魔术"数字,如果有多线变体的解决方案.

有关我为什么要根据x高度和我的解决方案将其居中的示例,请参阅Codepen.

Answer 1

文本中心位置和小写字母中心之间的差异等于(ascender height - x-height - descender height)/2(基本上我们需要以某种方式增加下降器高度,使其等于将ascender height - x-height线盒的几何中心移动到小字母中心的位置).从这3个未知数中,只有x-heightCSS(通过ex单位)可用.其他字体指标无法读取并保持"魔法数字",因此只能为每种特定字体选择特定值.但是使用这个'特定于字体的魔术数字',您可以将任意数量的行居中 - 通过给出内部元素display:inline-block并将magic value其分配给它padding-bottom.

似乎不可能从纯CSS中的字体度量获得所需的值.vertical-align像text-top/ 这样的值text-bottom可以给出上升或下降的位置,但只有其中一个,外来值sub似乎完全是任意的,我发现没有可能"测量"一个元素的两个字体度量之间的差异.

我最成功的尝试是将线(或线)移动所需差异的一半,使'混合'居中(无论是大写字母还是小写字母都是精确居中的,但是'光学'文本可能看起来更好居中).这可以通过添加到最后一行的另一个伪元素来完成,该元素具有行框的高度,但它与小写字母的中心对齐:

.blue:after {
  content: ':'; /* must contain text to get the auto height of the line box */
  display: inline-block;
  vertical-align: middle;
  width: 0; /* making pseudo elenent invisible */
  overflow: hidden;
}

用结果编辑了CodePen示例(我没有隐藏伪元素用于可视化).

为了使内联块本身居中,可以使用任何方法,我选择具有第二个辅助伪元素的方法,该元素始终具有容器的100%高度,因此不需要更多的幻数.

希望能帮助到你:)