摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個(gè)在文檔流中的元素并且?guī)в袑傩缘脑?。最右，不在文檔流中的元素但是內(nèi)容區(qū)域有高度。元素的基線依賴于元素是否是文檔流中的元素。

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

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

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

但是這里還有另外一種玩法:vertical-align。我認(rèn)為他值得更多的贊譽(yù)。OK，技術(shù)上來說使用vertical-align布局是一種hack的手段，因?yàn)樗⒉皇且驗(yàn)閷?shí)現(xiàn)我們上面那種需求發(fā)明的。盡管如此，你也可以在不同的上下文中使用vertical-align來靈活細(xì)致的擺放元素。不需要知道元素的大小。元素在文檔流中，也能感知其他元素尺寸的改變。這些都讓vertical-align變成了更有價(jià)值的選項(xiàng)。

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

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

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

所以，讓我們來解決掉這場關(guān)于規(guī)則的游戲吧。

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

inline

inline-block

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

基本的inline元素都是標(biāo)簽裹著文字。

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

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

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

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

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

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

inline element的基線，在字符放置的位置。在圖中，用藍(lán)線表示。初略的講，基線的位置一般是在字體高度一半以下的位置?？梢钥纯碬3C的標(biāo)準(zhǔn)對它的定義，detailed definition。

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

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

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

假設(shè)內(nèi)容在文檔流中，inline-block元素的基線是普通流中的最后一個(gè)內(nèi)容元素的基線（最左的例子）。對于最后一個(gè)元素的基線根據(jù)它自己的規(guī)則來找尋。

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

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

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

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

line box的基線是多種多樣的

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

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

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

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

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

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

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

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

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

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

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

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

: 元素的基線相對于line box的基線通過絕對值的大小進(jìn)行移動(dòng)。

middle: 元素的頂部與底部邊緣的中點(diǎn)相對于line box的基線移動(dòng)x-height的一半的位置對齊。

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

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

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

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

在W3C標(biāo)準(zhǔn)中的定義

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

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

Centered?



Centered!

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

這有助于幫我們理解。因?yàn)樵谧筮叺奈淖植]有對齊元素，而是被放置在基線所處的位置。通過使用vertical-align:middle來對齊盒子，我們將只是將盒子放置在了小寫字母的中間。所以，出頭部分的字母出現(xiàn)在頂部。

在右邊，我們將全部文字區(qū)域放置在垂直方向的中點(diǎn)。通過移動(dòng)text的基線到line box的基線的下方來實(shí)現(xiàn)。結(jié)果是文字完美的居中于緊挨著的icon。

當(dāng)我們使用vertical-align工作時(shí)，容易遇到的一個(gè)共同的問題：line box的基線會(huì)被在同一行中所有元素影響。讓我們猜一猜，一個(gè)元素有可能在這樣被對齊的，通過移動(dòng)line box的基線。因?yàn)榇蠖鄶?shù)垂直對齊（除了頂部和底部）都是相對于基線，這也會(huì)導(dǎo)致在同一行的的所有元素的位置都會(huì)被調(diào)整。

一些例子：

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

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

同樣的給它設(shè)置vertical-align的值分別設(shè)為left和bottom移動(dòng)基線。而這很奇怪，因?yàn)榛€本不應(yīng)該參與。

在一行中，放置兩個(gè)大體積元素并且移動(dòng)基線垂直對齊他們以此滿足同時(shí)對齊。line box的高度被調(diào)整（左邊的例子）。添加第三個(gè)元素，它并有跑到line box的邊緣因?yàn)樗膶R屬性，既沒有影響line box的高度，也沒有影響line box基線的位置（中間的例子）。如果它真的跑到了line box的邊緣，我們的前兩個(gè)盒子會(huì)被往下推（最右的例子）。

當(dāng)你知道了規(guī)則，這就沒那么復(fù)雜了。如果vertical-align并沒有按照你想的那樣行動(dòng)，問自己兩個(gè)問題：

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

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

這將解決你的問題。