CSS屬性Vertical Align使用方法

2020-03-24 16:56:38

字體：大中小

來源：轉載

供稿：網友

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。html教程

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

上一篇：使用Web標準建站第9天：CSS布局入門

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