当试图将容器的中心集中在一个容器
CSS-Tricks有一个很好的指导.然而,当试图垂直居中一些比容器略小的文本时,我认为一种不同的垂直居中文字的方式可能更为可取.而不是使用字体的整个高度,我宁愿基于字体的x高度(基本上是小写x的高度)
并且看到这个例子,其中红色是基于整个高度,而绿色是基于x-height
我可以想出的唯一选择是将伪元素添加到与容器具有相同高度的文本中,并使用vertical-align：middle.
.pseudo {
white-space: nowrap;
}
.pseudo:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100px;
width: 0;
}
这是有效的,但不幸的是只有一条线.我想知道有没有人试图解决这个问题,如果还有最好的做法呢？我特别感兴趣的是使用尽可能少的“魔术”数字,如果有一个很好的解决方案的多线变体.
解决方法
文字中心位置与小字母中心之间的差异等于(上升高度 – x高度 – 下降高度)/ 2(基本上我们需要以某种方式增加下降高度,使其等于上升高度 – x-height移动线框的几何中心到小字母中心的位置).从这3个未知数,只有x-height可用于CSS(通过ex单元).其他字体指标无法读取,并且仍然是“神奇数字”,所以只能为每个特定字体选择一个特定的值.但是使用这种“特定于字体的魔术数字”可以使任意数量的行居中 – 通过给出内部元素显示：内嵌块,并将魔术值分配给其填充底部.
在纯CSS中从字体指标中获取所需的值似乎是不可能的.如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;
}
Edited CodePen example结果(我没有隐藏伪元素可视化).
为了使内嵌块本身居中,可以使用任何方法,我选择的方法与第二个辅助伪元素总是具有100％的容器高度,所以不需要更多的魔术数字.
希望它有帮助:)
