CSS vertical align屬性的用法

2021-08-06 06:05:25 字數 2017 閱讀 4312

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

再比如input和span連用時,谷歌火狐ie8以上版本裡預設的是span在input的中間位置,但ie6/ie7裡,span底部和input底部對齊,實現統一的辦法就是給input新增input,要想它們垂直方向上的中線對齊,就同時也為span設定span

vertical-align的使用

1.用於內聯元素

下面以影象的垂直對齊為例子說明一下vertical-align屬性的用法。

img看看我的位置

2.用於**

vertical-align屬性可以直接用於**單元格,效果相當於html中的valign屬性。

td這是乙個測試

這是乙個測試

這是乙個測試

這是乙個測試

3.用於塊元素

vertical-align屬性是不適用於塊元素的,這就是為什麼有些人使用vertical-align屬性無效的原因。但是我們可以使用display屬性,設定其值為table-cell,將塊元素轉化為單元格,然後再使用vertical-align屬性。

div需要注意的是,上面這種方法是存在相容性問題的。ie6/ie7以及以ie為核心的瀏覽器如世界之窗、360、遨遊等瀏覽器不支援這種用法,而chrome、火狐卻能支援。

為了相容ie6/7可以為div新增以下屬性

div

CSS vertical align屬性詳解

返回頂部 vertical align屬性可能是css屬性中比較不好理解的乙個。w3c對它的解釋是 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。本文將通過一系列例項實驗說明它的作用。首先,在html body中定義乙個用於實驗的html結構 它包含乙個div作為父元素,兩張,和乙個s...

css vertical align簡單的應用

vertical align屬性值 我見過的 1 用來寫在img標籤上,讓兩旁的字與底部 頂部 中間對齊 vertical align text top vertical align text bottom vertical align middle 這一前面的文字 這一前面的文字 src asse...

iOS clipsToBounds屬性的用法

clipstobounds屬性介紹 值 bool yes no 作用 決定了子檢視的顯示範圍。具體的說,就是當取值為yes時,剪裁超出父檢視範圍的子檢視部分 當取值為no時,不剪裁子檢視 超出部分繼續顯示,例如在scrollview中。預設值為no。如題,有兩個view view1,view2 vi...