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連用時,谷歌火狐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{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、火狐卻能支援。
為了相容ie6/7可以為div新增以下屬性
div{ *display:block; *font-size:175px;/*高度为200px, 则200*0.873约为175px* 撑开/ }
以上是CSS中關於屬性vertical-align的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!