關於 vertical-align 的一些理解

前言

關於 vertical-align，咱們很容易想到，這不就是告訴咱們元素在縱向上和什麼對齊的屬性嗎？而事實上，正是這種寬泛的說法致使了咱們對其的理解存在許多不肯定性。事實上，「對齊」這兩個字其實牽涉到4個對象：即哪一個對象的哪條線，與哪一個對象的哪條線對齊？只有將這4者搞清楚，咱們才能說是理解了這個屬性。

咱們知道，vertical-align 有如下幾類可選值：

1. 文字：baseline、top、bottom、text-top、text-bottom、middle、sub、super

2. 百分比

3. 數字

其中，文字是最多的，如今我就以文字爲例，來探討如下vertical-align到底是怎麼對齊的。在閱讀以前，有一些預備知識應該是必不可少的，它們是：

1. 關於行內元素的4種box模型：containing boxes、inline boxes、line box 以及 content area。

2. 關於 font-size 的 4 條參考線:topline、bottomline、baseline以及middleline。

3. 關於 font-size 和 line-height 之間的關係。

以上知識能夠在如下文章中看到
深刻了解css的行高Line Height屬性

下面是此次我使用的例子。
html：

<div class="box">
    0.Eng<sub>2</sub>lish<sup>3</sup>
    <span class="span">Englishx</span>
</div>

css：

.box{
    border: 1px solid #555;
    font-size: 28px;
    height:150px;
    line-height: 100px;
}
.span{
    display: inline-block;
    background-color: #ddd;
    font-size: 50px;
    margin-right: 35px;
    line-height: 80px;
}

vertical-align:top

目標元素的 inline-box 的頂端邊緣，與父元素的 line-box 的頂端邊緣對齊。這很好理解。

vertical-align:bottom

目標元素的 inline box 的底端邊緣，與父元素的 line-box 的底端邊緣對齊。一樣很好理解。

不過，這裏有同窗說了：不對啊，圖片裏目標元素的底端沒有和父元素的底端對齊啊！注意，上面寫的是與父元素的 line-box 的底端邊緣對齊。那麼父元素的底端邊緣在哪裏呢？並非在下邊框這裏。這是由於，下邊框是被父元素的 height 屬性撐開的，父元素的 line box 的高度，是由 line-height 屬性決定的。注意看上面的 css。這裏的 line-height 比 height 要小，因此目標元素的底部達不到父元素的下邊框。

還有一部分眼尖的同窗說，仍是不對呀，我目測了一下，你 css 裏設置的 line-height 是 100px。可是這裏目標元素的底部，離父元素的頂部彷佛要大於 100px 呀？是的，你說的沒錯。實際上這個數字是118px，緣由是，內部匿名inline box 的上標(3)和下標(2)把這個匿名 inline box 的line-height 撐大了，致使其實際 line-height 達到了 118px。若是把上標下標去掉，那就完美符合啦。

vertical-align:middle

目標元素的 inline-box 的垂直平分線，與父元素內匿名inline boxes的 middleline 對齊。這個屬性恐怕是實戰中使用最頻繁的屬性了。

這裏出現了幾個新東西，須要多說幾句。垂直平分線，這個容易理解。那什麼是「父元素內匿名inline boxes，什麼又是「父元素內匿名 inline boxes 的 middleline」？

首先，父元素內匿名inline boxes，你能夠假設成直接寫在父元素內的純文字。因爲它被父元素直接包裹，因此各類屬性，包括line-height 和 font-size 等等，都是直接繼承自父元素。固然，父元素內未必真的存在文字，它內部可能沒有任何匿名inline boxes，可是，當 vertical-align 參與計算的時候，所參照的就是這個可能並不存在的匿名inline boxes。

好了，輪到 middleline。middleline 以前被我放在了預備知識裏，這裏再多引伸一點。按照規範，middleline 是文字的 baseline 往上方挪 1/2 個 x字母高度 的位置，所在的那條線。這條線並非content area的嚴格中線，但和真正幾何位置的中線很接近。

爲了更清楚地表示 middleline 的位置，我這裏多加了3個 x 字母，很明顯，middleline 穿過字母 x 的中央。

好了，理解了 vertical-align:middle ，咱們再理解下面幾個屬性就簡單多了。

vertical-align:text-top

目標元素的 inline-box 的頂部邊緣，與父元素內匿名 inline boxes 的頂線，topline對齊。這裏要注意，topline 在視覺上並不和l、h這些高字母的頂端對齊，這是由於這些字母的高度都沒有達到topline。topline 要比這些字母的頂端再高一些。

vertical-align:text-bottom

目標元素的 inline-box 的底部邊緣，與父元素內匿名 inline boxes 的底線，bottomline對齊。和 topline 不一樣，像 g 這樣的下沉字母的底端通常都會達到 bottomline 的位置。

vertical-align:baseline

這個默認屬性反而放到後面來講？爲何？由於這裏和上面有一點不一樣。在上面的狀況下，目標元素參與對齊的參考線，都是 inline-box 的上下邊緣，而這裏是 baseline!

vertical-align:sub

目標元素的 inline-box 的 baseline，與父元素內下標（sub 標籤）的 inline boxes 的 baseline 對齊。

vertical-align:super

目標元素的 inline-box 的 baseline，與父元素內上標（sup 標籤）的 inline boxes 的 baseline 對齊。