這兩天寫個頁面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的定義,大體上能夠分為兩個部分：
第一種使用方法。先看后面一句“在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。”這非常easy理解，假設給一個表格的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連用時，谷歌火狐IE8以上版本號里默認的是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{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、火狐卻能支持。

為了兼容ie6/7能夠為div添加下面屬性

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

**

特別提醒：vertical-align僅僅對行內元素有效，對塊級元素無效。

**

總結

以上是生活随笔為你收集整理的CSS vertical-align属性的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。