内联垂直对齐有什么用例：中间？

Question

当从视觉角度垂直对齐带有 vertical-align：middle 的内联元素时，生成的对齐似乎略微偏离。这种影响来自以下差异：

• 在大多数人的感知中，文本的垂直中间点自然似乎是大写字母（也称为cap-height）的中间或“向上到达”小写字母的中间字母如'h'或'f'（又名x-height + ascender）
• html / css标准将垂直中间点定义为小小写 - 通信的中间，如'x'（又名x高度）

我怀疑html / css标准是出于某种正当理由而以这种方式定义的。 那么这个决定背后的思考过程又是什么呢？它如何转化为这种垂直对齐行为的具体用例呢？

Answer 1

这可以用以下图像概括

字体的分配空间通常包含所有派生的空间。这包括重点。考虑到下行和资本/上升，中间点垂直落在小写x（x高度）的中心点，大致是（下降+上升/下降） - 或者是尾部之间的中间点。 'y'和'h'的尖端。

这与大写字母高度+基线/ 2的平均线不同。正是这种差异导致视觉差异 - 然而，参考图像：如果中间线被视为垂直中间，结果将是一个字体，其底部有额外的空置空间，因为（大致）25％的位移沿y轴向上。在对齐方面，由于这个多余的空间会形成下面的字体的一部分，因此不能通过改变线高来控制不对中。