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

img {
vertical-align: middle;
}

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

vertical-align 的有效值包括：baseline、sub、super、top、text-top、middle、bottom、text-bottom、長度和百分數(shù)。

Baseline

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

Middle

對于用作圖標的圖片來說，最常見的 vertical-align 值就是了 middle 了：

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

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

Text-bottom

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

Text-top

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

Top 和 Bottom

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

Sub 和 Super

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

在表格單元格中垂直居中

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

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

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

vertical-align 和 inline-block

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

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