CSS屬性Vertical Align使用方法講解

[**建設之]css屬性vertical align使用方法講解

css有乙個屬性叫vertical align。當你第一次學習它的時候會有些困惑，因此我覺得我們可以通過它的用法來了解它。最基本的用法像這樣：

img注意在這個應用案例中，它被應用到了img元素上。通常是行內元素，意味著它通常是和文字在一起的。但是到底」在一起」確切的是什麼意思？這就是vertical-align所要解決的。

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

來實現這種效果。

baseline

vertical-align預設的值就是baseline（如果你沒有做任何宣告的話）。會和文字以文字基線為準對其。注意下行字母降到了基線以下。不會和下行字母的最下端對齊，那不是基線。

middle

也許vertical-align的最常用的用法是給圖示大小的設定為」middle」。結果有著跨瀏覽器的一致性。

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

和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」來實現垂直對齊。比如，。需要說明的是這種縮寫是不應該使用的。真的沒有任何理由這樣使用css