html - 内联垂直对齐 :middle? 的用例是什么

Question

从视觉 Angular 来看，当使用 vertical-align:middle 垂直对齐内联元素时，生成的对齐方式似乎略有偏差。这种影响来自以下差异:

• 在大多数人看来，文本的垂直中点自然地似乎是大写字母(也称为大写高度)的中间或“向上延伸”的小写字母的中间像“h”或“f”这样的字母(又名 x-height + ascender)
• html/css 标准将垂直中点定义为一个小的小写字母的中间，例如“x”(也称为 x 高度)

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

Answer 1

这可以用下图来概括

字体的分配空间通常包括所有派生的空间。这包括重音。考虑到descenders和capital/ascenders，中间点垂直落在小写x的中心点(x-height)内，大致是(descender+ascender/2)-或者a的尾部之间的中点'y' 和 'h' 的尖端。

这与大写字母高度+基线/2的平均线不同。正是这种差异导致了视觉差异——然而，请引用图像:如果中线被视为垂直中间，结果将是一种字体，其底部有额外的空白空间，这是由于(大约)25% 的偏移造成的在 y 轴上。在对齐方面，由于这种多余的空间会构成底层字体的一部分，因此无法通过改变行高来控制错位。