vertical-align 是 CSS 中的一個(gè)常見屬性，但是當(dāng)你第一次學(xué)習(xí)和使用它的時(shí)候，往往會(huì)很困惑，所以我覺得有必要深入了解它的用法。最常見的使用方式就像下面這樣：

img {
vertical-align: middle;
}

從這里可以看到，vertical-align 屬性被應(yīng)用到了 img 標(biāo)簽上。img 標(biāo)簽是naturally inline elements,，它們可以嵌入到文本之中，而 vertical-align 屬性就是用來控制它們相對(duì)于所在行的對(duì)齊方式。在我的印象中，開發(fā)者使用 vertical-align 最大困惑就是在塊級(jí)元素上設(shè)置該屬性不會(huì)有任何效果。

vertical-align 的有效值包括：baseline、sub、super、top、text-top、middle、bottom、text-bottom、長(zhǎng)度和百分?jǐn)?shù)。

Baseline

baseline 是 vertical-align 的默認(rèn)值，舉例來說，在并排的圖片和文本行上，圖片的底部就是文本的基線。

Middle

對(duì)于用作圖標(biāo)的圖片來說，最常見的 vertical-align 值就是了 middle 了：

通過設(shè)定該樣式，瀏覽器可以完美實(shí)現(xiàn)圖片和文本的居中對(duì)齊：

值得注意的是，如果圖片的高度大于文本的 font-size 和 line-height，那么就會(huì)由于圖片的推擠，導(dǎo)致后續(xù)的文本行和前邊的文本行間距過大（不協(xié)調(diào)）。

Text-bottom

與 baseline 所不同的是，text-bottom 指的就是文字的最底部，定義該樣式可以讓文本和圖片在底部對(duì)齊：

Text-top

text-top 是和 text-bottom 相反的位置，指文本的最頂部。值得注意的是，在下面使用的字體 Georgia 的頂部比實(shí)際渲染出來的文字頂部要高一些，所以下面圖片中的文字頂部留出了一些空白：

Top 和 Bottom

top 和 bottom 的表現(xiàn)效果非常類似 text-top 和 text-bottom，最重要的差別在于，這里的頂部和底部并不是根據(jù)文本來確定的，而是根據(jù)行內(nèi)所有元素的頂部確定的。所以，如果某一行內(nèi)有文字和多張高度不同的圖片（假設(shè)圖片高度遠(yuǎn)大于文字的 font-size 和 line-height），那么該行的頂部和底部就是高度最大的圖片的頂部和底部。

Sub 和 Super

sub 和 super 分別代表文字的上標(biāo)和下標(biāo)位置，所以定義該樣式的元素會(huì)被定位到如下圖所示的位置：

在表格單元格中垂直居中

與圖片有所不同，文字在表格單元格中默認(rèn)就是垂直居中的：

如果想要改變這種默認(rèn)樣式，可以通過設(shè)置 top 和 bottom 來實(shí)現(xiàn)頂部和底部對(duì)齊：

當(dāng)你在表格單元格中使用 vertical-align 屬性時(shí)，top、bottom 和 middle 是你的最佳選擇，使用其他的屬性則會(huì)產(chǎn)生一些兼容性問題。比如，text-bottom 對(duì)齊方式在 IE 6 中會(huì)表現(xiàn)為 bottom，在 Safari 4 中會(huì)表現(xiàn)為 top；sub 對(duì)齊方式在 IE 6 中表現(xiàn)為 middle，在 Safari 4 中會(huì)表現(xiàn)為 top。

vertical-align 和 inline-block

雖然從嚴(yán)格意義上來說，img 是行內(nèi)元素，但它的表現(xiàn)效果更像是行內(nèi)塊級(jí)元素（inline-block）。與大多數(shù)行內(nèi)元素不同的是，可以為它設(shè)置寬度和高度。

行內(nèi)塊級(jí)元素使用 vertical-align 的方式和 img 的方式相似，但并不是所有的行內(nèi)塊級(jí)元素都可以這么使用，所以對(duì)于某些元素，是否能夠使用該屬性值得你思考了。具體哪些元素可以使用 vetical-align，這就是另一個(gè)話題了……