什麼是vertical-align：middle真的嗎？它的參考在哪裏？

Question

當您有兩個共享同一行的內聯元素，並且較大的元素是vertical-align: baseline，而較小的元素是vertical-align: middle爲什麼中間對齊元素顯示在基線元素下方？

我已經把出什麼我談論的是一個演示： http://jsfiddle.net/mLSG2/

看來，更小的元素的中線對齊，以更大的元素基線，但這並不似乎使對我來說很有意義。如果這是真的，它背後的理性是什麼？

更一般地說，有人可以解釋當不同直線高度和不同垂直對齊聲明的元素共享同一行時，如何計算對齊？規範中有沒有對此進行定義的地方？

Answer 1

由specification,vertical-align: middle應該「將盒子的垂直中點與父盒子的基線加上父盒子的x高度的一半對齊」。在這種情況下，斜體文本的線框垂直中間應與div元素的基線加上該元素的x高度的一半。這使得它非常接近那個基線，真的。

由於這裏沒有設置字體，瀏覽器通常會使用默認字體大小，如16px。 x高度取決於字體，但讓我們假設粗略的平均值：字體大小的一半，8px。一半是4px，差別很小。 （div元素的字體大小不會因具有較大字體大小的內部元素而改變。）

這種情況可能會被瀏覽器錯誤所掩蓋。 vertical-align屬性有一個馬車歷史記錄。通常最好使用相對定位。