首頁 > web前端 > css教學 > 解讀css中的vertical-align屬性

解讀css中的vertical-align屬性

零下一度
發布: 2017-06-19 15:57:18
原創
1872 人瀏覽過

語法: 

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板