語法:
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
參數:
baseline : 將支援valign特性的物件的內容與基準對準
sub : 垂直對齊文字的下標
super : 對齊文字的上標
top : 將支援valign特性的物件的內容與物件頂端對齊
text-top : 將支援valign特性的物件的文字與物件頂端對齊
#middle : 將支援valign特性的物件的內容與物件中間對齊
bottom : 將支援valign特性的物件的文字與物件底端對齊
text-bottom : 將支援valign特性的物件的文字與物件頂端對齊
length :##length : CSS2 由浮點數數字和單位識別碼組成的長度值| 或百分數。可為負數。定義由基線算起的偏移量。基線對於數值來說為0,對於百分數來說就是0%。目前IE5尚不支持。請參閱長度單位
說明:
設定或檢索物件內容的垂直對其方式。
對應的腳本特性為verticalAlign。請參閱我所寫的其他書目。
範例:
td { vertical-align : center; }
css 為什麼給span加vertical-align: middle不起作用?
vertical-align對一些特定顯示樣式(例如儲存格顯示方式:table-cell)的元素才會運作。所以要實現上下垂直居中對齊,可以採用如下樣式
display:table-cell; /*按照单元格的样式显示元素*/ vertical-align:middle; /*垂直居中对齐*/
上面的設定方式相比設定line-height屬性,可以相容文字有多行的情形。
下面舉例說明:
建立Html元素
<div> <span>测试测试,即便是多行,我也还是垂直居中对齐的。</span> </div>
設定css樣式
div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;
vertical-align: top ;什麼意思
vertical-align這個是設定元素的垂直排列的.
用來定義行內元素的基線相對於該元素所在行的基線的垂直對齊.
它的值比較多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit
比如說top就是垂直對齊文字的頂部.
在表格中,這個屬性設定單元格內容的對齊方式.vertical-align應用最多的應該是在td內,控制內部對象位置.
這個屬性在各個瀏覽器中的效果都不大一樣,所以慎重使用
以上是解讀css中的vertical-align屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!