vertical-align 屬性/樣式/取值/語(yǔ)法/格式寫法/簡(jiǎn)寫/用法[CSS教程手冊(cè)]

語(yǔ)法：

默認(rèn)值：baseline

適用于：內(nèi)聯(lián)級(jí)與 table-cell 元素

繼承性：無(wú)

動(dòng)畫性：當(dāng)值為 <length> 時(shí)

計(jì)算值：指定值

取值：

baseline：: 把當(dāng)前盒的基線與父級(jí)盒的基線對(duì)齊。如果該盒沒(méi)有基線，就將底部外邊距的邊界和父級(jí)的基線對(duì)齊
sub：: 把當(dāng)前盒的基線降低到合適的位置作為父級(jí)盒的下標(biāo)（該值不影響該元素文本的字體大小）
super：: 把當(dāng)前盒的基線提升到合適的位置作為父級(jí)盒的上標(biāo)（該值不影響該元素文本的字體大小）
text-top：: 把當(dāng)前盒的top和父級(jí)的內(nèi)容區(qū)的top對(duì)齊
text-bottom：: 把當(dāng)前盒的bottom和父級(jí)的內(nèi)容區(qū)的bottom對(duì)齊
middle：: 把當(dāng)前盒的垂直中心和父級(jí)盒的基線加上父級(jí)的半x-height對(duì)齊
top：: 把當(dāng)前盒的top與行盒的top對(duì)齊
bottom：: 把當(dāng)前盒的bottom與行盒的bottom對(duì)齊
<percentage>：: 把當(dāng)前盒提升（正值）或者降低（負(fù)值）這個(gè)距離，百分比相對(duì)line-height計(jì)算。當(dāng)值為0%時(shí)等同于baseline。
<length>：: 把當(dāng)前盒提升（正值）或者降低（負(fù)值）這個(gè)距離。當(dāng)值為0時(shí)等同于baseline。（CSS2）

說(shuō)明：

設(shè)置或檢索內(nèi)聯(lián)元素在行框內(nèi)的垂直對(duì)其方式。

對(duì)應(yīng)的腳本特性為verticalAlign。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vertical-align_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列【CSS在線手冊(cè)-網(wǎng)站設(shè)計(jì)教程參考資料】</title>
<meta name="author" content="易網(wǎng),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站建設(shè),www.dgyx668.com" />
<style>
.test p{border:1px solid #000;font-size:16px;line-height:2;}
.test a{margin-left:5px;font-size:12px;}
.baseline a{vertical-align:baseline;}
.sub a{vertical-align:sub;}
.super a{vertical-align:super;}
.top a{vertical-align:top;}
.text-top a{vertical-align:text-top;}
.middle a{vertical-align:middle;}
.bottom a{vertical-align:bottom;}
.text-bottom a{vertical-align:text-bottom;}
.length a{vertical-align:10px;}
</style>
</head>
<body>
<ul class="test">
	<li id="seln0mt" class="baseline">
		與基線對(duì)齊
		參考內(nèi)容<a href="?">基線對(duì)齊</a>
	</li>
	<li id="5vwaq5v" class="sub">
		與參考內(nèi)容的下標(biāo)對(duì)齊
		參考內(nèi)容<a href="?">下標(biāo)對(duì)齊</a>
	</li>
	<li id="0g0vjnr" class="super">
		與參考內(nèi)容的上標(biāo)對(duì)齊
		參考內(nèi)容<a href="?">上標(biāo)對(duì)齊</a>
	</li>
	<li id="c5mrvwa" class="top">
		對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊
		參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a>
	</li>
	<li id="bzzgkml" class="text-top">
		對(duì)象的文本與對(duì)象頂端對(duì)齊
		參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a>
	</li>
	<li id="cf5zprs" class="middle">
		對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊
		參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a>
	</li>
	<li id="5ncauw0" class="bottom">
		對(duì)象的內(nèi)容與對(duì)象底端對(duì)齊
		參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a>
	</li>
	<li id="ylml5hl" class="text-bottom">
		對(duì)象的文本與對(duì)象頂端對(duì)齊
		參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a>
	</li>
	<li id="oz30wvn" class="length">
		與基線算起的偏移量
		參考內(nèi)容<a href="?">偏移量對(duì)齊</a>
	</li>
</ul>
</body>
</html>