CSS屬性Vertical Align使用方法

2020-03-24 16:56:38

字體：大中小

供稿：網(wǎng)友

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

img{

vertical-align: middle;

}

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

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

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

Baseline

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

Middle

也許vertical-align的最常用的用法是給圖標(biāo)大小的圖片設(shè)置為”middle”。結(jié)果有著跨瀏覽器的一致性。

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

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

Text-bottom

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

Text-top

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

Top和Bottom

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

Sub和Super

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

在表格中垂直對齊

不像圖片，表格默認(rèn)為居中垂直對齊：

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

當(dāng)給表格應(yīng)用vertical-align時，是靠頂部、底部還是居中對齊要看運(yùn)氣。沒有一個值是能夠解釋的通的，不同的瀏覽器有不可預(yù)料的結(jié)果。比如，在表格中給文字應(yīng)用text-bottom對齊方式時，IE6中是在底部，Safari4中是在頂部。設(shè)置為sub，IE6中是在中間，Safari4中是在頂部。

Vertical Align和Inline-Block

圖片，從理論上來說是行內(nèi)元素，表現(xiàn)上卻像是行內(nèi)塊級元素。你可以給它設(shè)置高度和寬度，它會遵守，不像其它行內(nèi)元素。

給行內(nèi)塊級元素應(yīng)用vertical-align，表現(xiàn)就像如上圖片那樣，這是vertical-align是最少讓你擔(dān)心的。但是那是另外一個故事了……

不要使用縮寫

通常你會在表格中看到”valign”來實現(xiàn)垂直對齊。比如，《td valign=top》。需要說明的是這種縮寫是不應(yīng)該使用的。真的沒有任何理由這樣使用CSS。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：使用Web標(biāo)準(zhǔn)建站第9天：CSS布局入門

下一篇：CSS研究教程-類名的長命名和短命名