當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > CSS垂直對齊屬性vertical-align屬性

CSS垂直對齊屬性vertical-align屬性

2012/11/24 10:09:43作者:佚名來源:網(wǎng)絡(luò)

移動端

【實例介紹】

CSS垂直對齊屬性vertical-align屬性

使用垂直對齊方式可以設(shè)置段落的垂直對齊方式。

【基本語法】

vertical-align:排列取值

【語法介紹】

vertical-align包括以下取值范圍。
baseline:瀏覽器的默認(rèn)垂直對齊方式。
sub:文字的下標(biāo)。
super:文字的上標(biāo)。
top:垂直靠上對齊。
text—top:使元素和上級元素的字體向上對齊。
middle:垂直居中對齊。
text-bottom:使元素和上級元素的字體向下對齊。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> </head> <style type="text/css"> .CSS {  font-family: "宋體";  font-size: 13px;  letter-spacing: 10px; } .CSS1 {  font-family: "宋體";  font-size: 13px;  letter-spacing: 10px;  vertical-align: super; }</style> <body> <p><span class="CSS">生活是剪不斷的留影和唱不完的聲音<br /> 總在陌生而熟悉的路上被我們想起<br /> 我們的心有時走累了</span><br /> <span class="CSS1">需要一個溫暖而親切的驛站來休憩<br /> 這里 便是你最好的選擇 </span></p> </body> </html>

【代碼分析】

在代碼中,加粗的vertical—align:super標(biāo)記設(shè)置文本垂直對齊方式為上標(biāo),在瀏覽器中預(yù)覽效果,如圖所示。

垂直對齊屬性vertical-align運行效果

【素材及源碼下載】

請點擊:CSS垂直對齊屬性vertical-align 下載本實例相關(guān)素材及源碼

 

標(biāo)簽: CSS  垂直  對齊屬性