为什么vertical-align无法垂直居中图片？

vertical-align属性垂直居中失效的真相

许多前端开发者在使用vertical-align属性尝试垂直居中图片时，常常遇到问题。本文将解析一个典型案例，解释为什么vertical-align有时无法实现图片垂直居中，并纠正“行框盒子前的‘幽灵空白节点’高度太小”这一误解。

问题在于，即使设置了vertical-align，图片仍然没有垂直居中。 文章中提到的“行框盒子前的‘幽灵空白节点’”，实际上指的是行内元素在行内上下文中的实际占用高度。 vertical-align作用于行内元素，基于基线（baseline）进行对齐。基线是文本中字母底部的参考点。

如果行内元素（如标签）的高度小于其父元素的行高（line-height），vertical-align的效果就会受限。因为行内元素的高度仅与其内容高度一致。如果没有设置line-height，行高就等于图片高度，vertical-align实际上只是让图片自身对齐，自然无法垂直居中。

只有当line-height大于图片高度时，行内元素的垂直空间才会扩展。这时，vertical-align才能有效地将图片相对于更大的行高进行垂直对齐。 因此，要垂直居中图片，需要设置足够大的line-height，使其超过图片高度，从而为vertical-align提供足够的垂直空间。这并非“幽灵空白节点”问题，而是行内元素在行内上下文中的高度限制了vertical-align的效果。 理解行内上下文对于解决此类问题至关重要。