為什么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的效果。 理解行內上下文對于解決此類問題至關重要。