CSS屬性Vertical Align基本使用方法

CSS有一個屬性叫Vertical Align。當你第一次學習它的時候會有些困惑，因此我覺得我們可以通過它的用法來瞭解它。最基本的用法像這樣：

img{
vertical-align: middle;
}

注意在這個應用案例中，它被應用到了img元素上。圖片通常是行內元素，意味著它通常是和文字在一起的。但是到底”在一起”確切的是什麼意思？這就是Vertical-align所要解決的。

有效值為：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我認為最讓人使人困惑的是，當大家嘗試著給區塊層級元素使用vertical-align時，卻得不到任何結果。如果你有一個大一些div，其中包含一個小的div，你希望小的能夠在大的之內垂直置中對其，vertical-align沒法幫到你。Douglas Heriot有好方法來實現這種效果。

Baseline

vertical-align預設的值就是baseline（如果你沒有做任何聲明的話）。圖片會和文字以文字基準為準對其。注意下行字母降到了基準以下。圖片不會和下行字母的最下端對齊，那不是基準。

Middle

也許vertical-align的最常用的用法是給表徵圖大小的圖片設定為”middle”。結果有著跨瀏覽器的一致性。

瀏覽器能夠讓文字和圖片精確的對齊：

要小心如果圖片比當前文字和行高要大的話，在需要的時候它會將下面的線條向下推：

Text-bottom

和基準不同，它是文字的底端，是下行文字靠近的方向。圖片也可以很好的和它對齊。

Text-top

和text-bottom相反的就是text-top，當前文字的最高點。你也可以依次對齊。注意下面的文字，Georgia字型，最上端要比圖片高出一點。

Top和Bottom

Top和Bottom類似於text-top和text-bottom，但是他們不受文字的限制，依賴於所在行的所有東西（比如另外一張圖片）。因此如果一行有兩張圖片，不同的高度，而且都要比所在行的文字大，它們的頂端（或者底端）就會對齊，而不理會文字的大小。

Sub和Super

這兩個值的意思是上標和下標，因此元素按照這個方式對齊自身如下：

在表格中垂直對齊

不像圖片，表格預設為置中垂直對齊：

如果你希望文字與表格的頂部或者底部對齊，應用top或者bottom對齊。

當給表格應用vertical-align時，是靠頂部、底部還是置中對齊要看運氣。沒有一個值是能夠解釋的通的，不同的瀏覽器有不可預料的結果。比如，在表格中給文字應用text-bottom對齊時，IE6中是在底部，Safari4中是在頂部。設定為sub，IE6中是在中間，Safari4中是在頂部。

Vertical Align和Inline-Block

圖片，從理論上來說是行內元素，表現上卻像是行內區塊層級元素。你可以給它設定高度和寬度，它會遵守，不像其它行內元素。

給行內區塊層級元素應用vertical-align，表現就像如上圖片那樣，這是vertical-align是最少讓你擔心的。但是那是另外一個故事了……

不要使用縮寫

通常你會在表格中看到”valign”來實現垂直對齊。比如，<td valign=top>。需要說明的是這種縮寫是不應該使用的。真的沒有任何理由這樣使用CSS。