關於 vertical-align，我們很容易想到，這不就是告訴我們元素在縱向上和什麼對齊的屬性嗎？而事實上，正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上，「對齊」這兩個字其實牽涉到4個物件：即哪個物件的哪條線，與哪個物件的哪條線對齊？只有將這4者搞清楚，我們才能說是理解了這個屬性。
我們知道，vertical-align 有以下幾類可選值：
文字：baseline、top、bottom、text-top、text-bottom、middle、sub、super
百分比數字
關於行內元素的4種box模型：containing boxes、inline boxes、line box 以及 content area。
關於 font-size 的 4 條參考線:topline、bottomline、baseline以及middleline。
關於 font-size 和 line-height 之間的關係。
以上知識可以在以下文章中看到
深入了解css的行高line height屬性
下面是這次我使用的例子。
目標元素的 inline-box 的頂端邊緣，與父元素的 line-box 的頂端邊緣對齊。這很好理解。
目標元素的 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。如果把上標下標去掉，那就完美符合啦。
目標元素的 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，我們再理解下面幾個屬性就簡單多了。
目標元素的 inline-box 的頂部邊緣，與父元素內匿名 inline boxes 的頂線，topline對齊。這裡要注意，topline 在視覺上並不和l、h這些高字母的頂端對齊，這是因為這些字母的高度都沒有達到topline。topline 要比這些字母的頂端再高一些。
目標元素的 inline-box 的底部邊緣，與父元素內匿名 inline boxes 的底線，bottomline對齊。和 topline 不同，像 g 這樣的下沉字母的底端一般都會達到 bottomline 的位置。
這個預設屬性反而放到後面來說？為什麼？因為這裡和上面有一點不同。在上面的情況下，目標元素參與對齊的參考線，都是 inline-box 的上下邊緣，而這裡是 baseline!
目標元素的 inline-box 的 baseline，與父元素內下標（sub 標籤）的 inline boxes 的 baseline 對齊。
目標元素的 inline-box 的 baseline，與父元素內上標（sup 標籤）的 inline boxes 的 baseline 對齊。
關於vertical align的種種
有些時候vertical align的渲染結果並不同我們想象的一樣。雖然現在已經有很多 css 屬性可以完美替代vertical align的渲染效果，但有些時候碰到還是很頭疼，所以最好還是搞清楚它。作用物件 inline inline block子元素。這個屬性失效的情況 作用物件是塊級元素 因為...
關於 vertical align 的一些小知識
在日常開發過程中，我們經常會遇到如下的場景，一行中既有也有文字，而且還要和文字對齊。效果如下 通常 如下 some text.得到的效果卻是這樣的 修改下文字為行內塊盒子，並設定行高與盒子高度 盒子高度與高度相同 一致，效果如下 我們發現文字區域始終與錯開了一些。怎麼解決呢？設定文字的 margin...
vertical align 樣式理解
文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排，使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...