基于x高度的垂直对齐 [英] Vertical alignment based on x-height

问题描述

尝试集中容器中的内容时一个例子为什么我想基于x高度和我的解决方案的中心。

解决方案

文本中心位置和小写字母中心之间的差异等于 -height - descender height）/ 2 （基本上我们需要以某种方式增加下降器高度，使其等于上升器高度 - x高度将线框的几何中心移动到小写字母中心的位置）。从这3个未知数，只有 x-height 可用于CSS（通过 ex 单位）。其他字体指标不能被读取，仍然是神奇数字，所以可能只为每个特定字体选择一个特定的值。但是使用这个字体特定的魔术数字，你可以使任何数量的行居中 - 通过给内部元素 display：inline-block 并赋值 magic value 到它的 padding-bottom 。

值来自纯CSS中的字体指标。 vertical-align 值为 text-top / text-bottom 可以给出上升或下降的位置，但只有其中一个，像 sub 的异常值似乎是完全任意的，我发现没有可能测量

我最成功的尝试是将线（或线）移动所需差异的一半，使hybrid中心（帽子和小写字母都不精确，但光学文本可能看起来更好的居中）。这可以通过添加到最后一行的另一个伪元素来完成，该元素具有行框的高度，但它与小写字母的中心对齐：

  .blue：after {
 content：'：'; / *必须包含文本以获取行框的自动高度* / 
 display：inline-block; 
 vertical-align：middle; 
 width：0; / * make pseudo elenent invisible * / 
 overflow：hidden; 
} 
  

已编辑的CodePen示例 （我没有隐藏伪元素可视化）。

对于内联块本身的居中，可以使用任何方法，我选择使用第二帮助伪元素的方法，它总是具有100％的容器高度，因此不需要更多的魔术数字。

希望它有帮助：）

When trying to center content in a container CSS-Tricks has a great guide. However when trying to vertically center some text that's just slightly smaller than its container, I think a different way of vertically centering text might be preferable. Instead of using the entire height of the font, I would rather center it based on the x-height of the font (basically the height of a lowercase x)

And see this example where red is based on the entire height and green is based on the x-height

The only option I could come up with is to add a pseudo element to the text with the same height as the container and to use vertical-align: middle to it.

.pseudo {
  white-space: nowrap;
}

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

This works, but unfortunately only for a single line. I was wondering if anyone else tried to solve this issue and if perhaps there are best practices to follow? I am especially interested using as little "magic" numbers as possible and if there is a good solution for the multi line variant.

See Codepen for an example on why I want to center it based on the x-height, and my solution.

解决方案

The differece between text center position and the small letters center is equal to (ascender height - x-height - descender height)/2 (basically we need to increase somehow the descender height to make it equal to ascender height - x-height to move the geometric center of the line box to the position of the small letters center). From these 3 unknowns, only x-height is available for CSS (via ex unit). Other font metrics can't be read and remain kind of 'magical numbers', so it's possible only to choose the a specific value for each specific font. But with this 'font-specific magic number' you can center any number of lines - by giving the inner element display:inline-block and assigning the magic value to its padding-bottom.

It seems impossible to get the needed value from the font metrics in pure CSS. Such vertical-align values as text-top/text-bottom can give the position of ascender or descender, but only one of them, exotic values like sub seem to be completely arbitrary, and I found no possibility to 'measure' the difference between two font metrics for one element.

My most successful attempt was the way to move the line (or lines) by half of the needed difference, making 'hybrid' centering (neither caps nor lowercase letters are centerd precisely, but 'optically' the text may look even better centered). This can be done by another pseudo element added to the last line, that has the height of the line box, but its aligned with the center of small letters:

.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 with the result (I didn't hide pseudo elements there for visualization).

For centering the inline-block itself, any approach can be used, I choose the approach with second helper pseudo element that always has 100% height of the container, so no more magic numbers are needed.

Hope it helps:)

这篇关于基于x高度的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！