关于vertical-align:middle问题

Question

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

Answer 1

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

题主提到的例子是很常见的，一个图片（行内替换元素）搭配一段文字，在默认情况下，图片下会有一些空白。而如果将图片元素增加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。

Answer 2

vertical-align:middle
通俗理解：把此元素放置在父元素的中部。
精准理解：元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。

具体的理解楼主可以参考此大神博客：http://www.zhangxinxu.com/wor...
基线的位置如下图：