CSS中關於屬性vertical-align的用法詳解

vertical-align的定義

W3C上對vertical-align的定義：vertical-align 屬性設定元素的垂直對齊。該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表儲存格中，這個屬性會設定儲存格框中的儲存格內容的對齊。

文本通常根據不可見的基準進行對齊的，而字母的底部位於基準之上。vertical-align屬性可以在文字的基準之上或之下提升或降低字母或映像。vertical-align屬性的值有baseline、sub、super、top、text-top、middle、bottom、text-bottom、、等，其中初始值為baseline。

baseline(基準)——將子項目的基準與父元素的基準相對齊。對於沒有基準的元素，像或對象，則使它的底部與父元素的基準對齊。

sub(下面)——把元素置於下方(下標)，確切地說是使元素的基準對齊它的父元素首選的下標位置。

super(上面)——把元素置於上方(上標)，確切地說是使元素的基準對齊它的父元素首選的上標位置。

text-top(文本頂部)——使元素的頂部與其父元素最高字母的頂部相對齊。

top(頂部)——使元素的頂部與行中最高事物的頂部相對齊。

middle(中間)——使元素垂直置中。

bottom(底部)——使元素的底部與行中最低事物的底部相對齊。

text-bottom(文本底部)——使元素的底部與其父元素字型的底部相對齊。

vertical-align的解讀

W3C上對vertical-align的定義,大體上可以分為兩個部分：

第一種用法，先看後面一句“在表儲存格中，這個屬性會設定儲存格框中的儲存格內容的對齊。”這很容易理解，如果給一個表格的td加一個vertical-align:middle的樣式，表格裡面的內容會垂直置中，同樣的如果給一個vertical-align:bottom就會底部對齊，如果給一個vertical-align:top就會頂部對齊。

第二種用法，看前頁一句“該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。”專業的語言我不會說的，可以打個比喻：假設有兩個行內元素a和b，a和b都是img，當a加了一個vertical-align:middle樣式之後，b的底部（基準）就會對齊a的中間位置，如：

如果a和b都加了一個vertical-align:middle樣式，那麼就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如：

比如，img和span一起出現，要想文字對齊圖片的中間位置，就需要為圖片添加img{vertical-align:middle;}

再比如input和span連用時，GoogleFirefoxIE8以上版本裡預設的是span在input的中間位置，但ie6/ie7裡，span底部和input底部對齊，實現統一的辦法就是給input添加input{vertical-align:middle;}，要想它們垂直方向上的中線對齊，就同時也為span設定span{vertical-align:middle;}

vertical-align的使用

1.用於內嵌元素

下面以映像的垂直對齊為例子說明一下vertical-align屬性的用法。

img{ vertical-align:middle;}<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2.用於表格

vertical-align屬性可以直接用於表格儲存格，效果相當於HTML中的valign屬性。

td{ height:40px; vertical-align:middle;}<table><tr><td>這是一個測試</td><td>這是一個測試</td></tr><tr><td>這是一個測試</td><td>這是一個測試</td></tr></table>

3.用於塊元素

vertical-align屬性是不適用於塊元素的，這就是為什麼有些人使用vertical-align屬性無效的原因。但是我們可以使用display屬性，設定其值為table-cell，將塊元素轉化為儲存格，然後再使用vertical-align屬性。

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

需要注意的是，上面這種方法是存在相容性問題的。IE6/IE7以及以IE為核心的瀏覽器如世界之窗、360、遨遊等瀏覽器不支援這種用法，而Chrome、Firefox卻能支援。

為了相容ie6/7可以為div添加以下屬性

div{*display:block; *font-size:175px;/*高度為200px，  則200*0.873約為175px* 撐開/  }