css - 关于vertical-align:middle问题

问题描述

问 题

根据我的理解vertical-align:middle是行内元素上下边缘的中点与行框基线+x字母高度的一半对齐，意思是基线不会产生移动。可是我在另一个参考资料中看到使用vertical-align:middle使行框基线到中间位置。
这个参考资料意思是行内块级元素底部与行框基线对齐，导致有一些空白，使用vertical:middle移动基线位置就可以消除空白了。
我觉得这两个的理解是有冲突的，但实际上它确实消除了空白。有哪位大神可以解释一下吗？

解决方案

以我的理解，父元素的基线不会移动。题主在另一个参考资料中看到的使行框基线到中间位置可能只是一种不准确的表述，但并不矛盾。下面解释一下。

题主提到的例子是很常见的，一个图片（行内替换元素）搭配一段文字，在默认情况下，图片下会有一些空白。而如果将图片元素增加vertical-align: middle;，就可以消除这个空白：

如上图，注意两个要点：

• 每一个行内元素都形成自己的一个行内框（inline-level box），对行内替换元素（图片）来说，行内框没有baseline，在默认对齐时取行内框下边缘作为对齐参考边。行内非替换元素（一般文字）形成的行内框，取文字的baseline。

• 每一个行内元素的vertical-align只决定自己生成的那个行内框的对齐方式

w3c里对vertical-align的取值的表述：

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

其中baseline of the parent box对应题主所说的行框基线，从图中可以看到，行框基线始终都和一般文字的baseline一致（不变的地方）。但从另一个角度来说，由于对齐方式的变化，一般文字在行框内的位置变了，所以感觉像是行框基线移动了（变的地方）。

为左边的图片元素设置的vertical-align: middle;只是改变了它自己的对齐方式，改为以自己的中线对齐[行框基线 + x字母高度的一半]，而行框基线还在那里，仍然等同于文字的baseline。

这篇关于css - 关于vertical-align:middle问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！