摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個在文檔流中的元素并且帶有屬性的元素。最右，不在文檔流中的元素但是內容區域有高度。元素的基線依賴于元素是否是文檔流中的元素。

原文：Vertical-Align: All You Need To Know

通常我都有需要垂直對齊在一排上一個接著一個的元素。
CSS提供了很多種可能性。有時，我聽過float來解決問題，有時使用position:absolute，有時甚至會通過添加margin或者padding屬性這種使代碼變得比較臟的方式來達到目的。

我一點也不喜歡上面這些解決方案。浮動僅僅是頂部對齊并且需要手動清除浮動。絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。而使用固定值的外邊距和內邊距會出現細微的差別。

但是這里還有另外一種玩法:vertical-align。我認為他值得更多的贊譽。OK，技術上來說使用vertical-align布局是一種hack的手段，因為他并不是因為實現我們上面那種需求發明的。盡管如此，你也可以在不同的上下文中使用vertical-align來靈活細致的擺放元素。不需要知道元素的大小。元素在文檔流中，也能感知其他元素尺寸的改變。這些都讓vertical-align變成了更有價值的選項。

但是，vertical-align有時也是個卑鄙小人。使用它工作也會使人有點沮喪。在使用它工作時，這里會有一些令人難以理解的規則。例如，它可能會發生這樣的情況，一個元素改變了他自己的vertical-align的值，而他的位置卻一點都沒有改變，改變的卻是同行的其他元素。我仍然會一次一次被拉入這種奇怪的現象，使我苦惱。

不幸的是，大多數資料都講述的比較淺顯。特別是，當我們想使用vertical-align布局時。他們對最基本的屬性進行了介紹并且在簡單的例子中解釋元素是如何在一行中進行擺放的。但是，他們并沒有去解釋它令人感到奇怪的部分。

所以，我的目標是使自己徹底弄清楚vertical-align到底是怎么回事。最后消解我疑問的是W3C"s的CSS specifications和標準中演示的一些例子。答案就在文章中。

所以，讓我們來解決掉這場關于規則的游戲吧。

vertical-align被用于inline-level elements。這些元素的display屬性如下

inline

inline-block

inline-table(這篇文章中，并不考慮這種情況)

基本的inline元素都是標簽裹著文字。

inline-block元素：是在行內中的塊級元素。他們可以有寬度和高度(通常情況下，這取決于他們的內容)。同樣也有padding，margin，border。

行內級元素在一行中一個挨著一個。一旦，這些元素超出了他們的所在行，一個新行便會建立在它下方。這里的每一行就叫做line box。每一行不同尺寸的元素意味著line box不同的高度。在下面的例子中紅線代表line box的頂部和底部。

line box尋找我們放置元素的軌跡。在這些line boxes里面vertical-align屬性負責擺放多帶帶的元素。所以什么樣的元素被用來對齊了呢？

在一行中垂直擺放元素，最關鍵的參考點是參與的元素的基線。在一些例子中，被關閉盒子的頂部和底部也變得非常重要。讓我們一起看看基線和外邊緣是如何參與到不同類型的元素中的。

這里有三行挨著的文字。頂部和底部的邊緣線是行高的邊緣線，它們都是紅線。字體的高度被綠線包裹著。藍色的線代表基線。在最左邊，文字的行高和字體本身的高度一樣高。綠線和紅線發生了重疊。在中間，行高是字體大小的2倍高。在最右邊，行高是字體大小的一半高。

inline element的外邊緣的位置，取決于他們的行高的頂部與底部邊緣。如果行高的高度比字體的高度小。那么，紅色的外邊緣的位置就如上面提到的一樣。

inline element的基線，在字符放置的位置。在圖中，用藍線表示。初略的講，基線的位置一般是在字體高度一半以下的位置。可以看看W3C的標準對它的定義，detailed definition。

從左邊到右邊的圖你可以看到：最左，一個在in-flow內的行內塊級元素。中間，一個在文檔流中的inline-block元素并且帶有overflow: hidden屬性的元素。最右，不在文檔流中的inline-block元素(但是內容區域有高度)。margin的邊界線指向紅線，border是黃色的部分，padding是綠色的部分，內容區域是藍色的部分。每一個inline-block元素的基線都用藍線表示。

inline-block元素的外邊緣 是它的margin-box的頂部和底部。在圖上，用紅線來表示。

inline-block元素的基線 依賴于元素是否是文檔流中的元素。

假設內容在文檔流中，inline-block元素的基線是普通流中的最后一個內容元素的基線（最左的例子）。對于最后一個元素的基線根據它自己的規則來找尋。

假設內容在文檔流中，但是元素有overflow屬性除了屬性值為visible這種情況，基線在margin-box的底部（最中間的例子）。所以，這等同于在inline-block元素的底部邊緣。

假設內容不在文檔流中，同樣的，margin-box的底部邊緣也是基線的位置所在。（例子在最右邊）

你已經看到了上面元素的放置。這次，我畫了line box的text box頂部和底部的線(如圖中的綠線,更多內容看下文)，基線如圖中藍色的線。我在文字元素上加了灰色的背景進行強調。

line box的頂部邊緣與最頂部元素的頂線對齊，底部邊緣與最底部元素的底線對齊。圖中紅線代表的就是line box。

line box的基線是多種多樣的

“CSS2.1 并沒有對line box基線的位置有明確的定義。-W3C Specs”

當使用vertical-align工作時，這可能是最令人迷惑的部分。這意味著，基線的位置改變是為了滿足像垂直對齊和降低line box的高度這樣的需求的。也就是說，在方程中，這是一個自由的參數。

因為line box的基線是不可見的，因此它的位置并不會那么明顯。但是，你可以容易的使它變得可見。只需要在一行的開頭加上一個字母，就像我在圖中添加的字母"x"。如果這個字母并沒排在一條直線上，那么x坐落的位置就是基線的位置。

在line box基線的周圍有text box。text box可以簡單的被認為是在line box中的行內元素。它的高度等同于它的父元素的文字大小。因此，text box僅僅只是圍繞著line box的非格式化文字。這個盒子在上圖中是指向綠線的位置。text box與基線的位置相關聯，它隨著基線而移動。

哦，現在是最難的部分。現在，我們把知道的所有事，都表現在了上圖中。讓我們快速的總結最重要的部分：

這里有一個區域被叫做line box。這是元素垂直對齊的區域。它有一個基線和一個text box以及頂部與底部邊緣。

這里有inline-level元素。他們是被對齊的對象。他們有基線以及頂部與底部邊緣。

通過使用vertical-align的參考點，也就是上文提到的基線和邊界線，將元素放置在合適的位置。

baseline: 元素的基線剛好放置在line box基線的上。

sub: 元素的基線放置在line box基線的下面。

super: 元素的基線放置在line box的基線的上面。

元素的基線移動相對于line box的基線通過相對于line-height的百分比的值來移動。

: 元素的基線相對于line box的基線通過絕對值的大小進行移動。

middle: 元素的頂部與底部邊緣的中點相對于line box的基線移動x-height的一半的位置對齊。

text-top: 元素的頂部邊緣被放置在line box的text box的頂部邊緣

text-bottom: 元素的底部邊緣被放置在line box的text box的底部邊緣

top： 元素的頂部邊緣被放置在line box的頂部邊緣

bottom： 元素的底部邊緣被放置在line box的底部邊緣

在W3C標準中的定義

現在，我們可以在具體的例子中看垂直對齊。特別是，處理一些比較容易出現差錯的情況。

這是一個一直以來都令我煩惱的事情：我有一個icon我想將它放置在一行文字的中間。只只僅僅將icon設置vertical-align: middle，看起來似乎不是一個安全的方法。看下面的例子。

Centered?



Centered!

這里也是上面這個例子，不過，這次我加了一些你從上文了解到的輔助線，

這有助于幫我們理解。因為在左邊的文字并沒有對齊元素，而是被放置在基線所處的位置。通過使用vertical-align:middle來對齊盒子，我們將只是將盒子放置在了小寫字母的中間。所以，出頭部分的字母出現在頂部。

在右邊，我們將全部文字區域放置在垂直方向的中點。通過移動text的基線到line box的基線的下方來實現。結果是文字完美的居中于緊挨著的icon。

當我們使用vertical-align工作時，容易遇到的一個共同的問題：line box的基線會被在同一行中所有元素影響。讓我們猜一猜，一個元素有可能在這樣被對齊的，通過移動line box的基線。因為大多數垂直對齊（除了頂部和底部）都是相對于基線，這也會導致在同一行的的所有元素的位置都會被調整。

一些例子：

如果在一行中，有一個高的元素占據了整行的高度，vertical-align對它不會有任何影響。在它的頂部上面與底部下面沒有任何多余的空間可以移動它。為了實現它相對于line box基線的對齊，line box的基線必須移動。矮一點的盒子設置了vertical-align: baseline。在左邊，高盒子根據text-bottom對齊。在右邊，根據text-top對齊。你可以看到矮盒子的隨著基線位置的改變而改變。

通過其他vertical-align的值對齊高的元素，也會出現和上面的例子相同的行為。

同樣的給它設置vertical-align的值分別設為left和bottom移動基線。而這很奇怪，因為基線本不應該參與。

在一行中，放置兩個大體積元素并且移動基線垂直對齊他們以此滿足同時對齊。line box的高度被調整（左邊的例子）。添加第三個元素，它并有跑到line box的邊緣因為它的對齊屬性，既沒有影響line box的高度，也沒有影響line box基線的位置（中間的例子）。如果它真的跑到了line box的邊緣，我們的前兩個盒子會被往下推（最右的例子）。

當你知道了規則，這就沒那么復雜了。如果vertical-align并沒有按照你想的那樣行動，問自己兩個問題：

line box的頂部與底部邊緣和基線在哪里？

inline-level元素的頂部與底部邊緣和基線在哪里？

這將解決你的問題。