?
? ????? PHP ??? ???? ??? ?? ??
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默認值:baseline
適用于:內(nèi)聯(lián)級與 table-cell 元素
繼承性:無
動畫性:當(dāng)值為 <length> 時
計算值:指定值
baseline:把當(dāng)前盒的基線與父級盒的基線對齊。如果該盒沒有基線,就將底部外邊距的邊界和父級的基線對齊
sub:把當(dāng)前盒的基線降低到合適的位置作為父級盒的下標(biāo)(該值不影響該元素文本的字體大?。?/p>
super:把當(dāng)前盒的基線提升到合適的位置作為父級盒的上標(biāo)(該值不影響該元素文本的字體大?。?/p>
text-top:把當(dāng)前盒的top和父級的內(nèi)容區(qū)的top對齊
text-bottom:把當(dāng)前盒的bottom和父級的內(nèi)容區(qū)的bottom對齊
middle:把當(dāng)前盒的垂直中心和父級盒的基線加上父級的半x-height對齊
top:把當(dāng)前盒的top與行盒的top對齊
bottom:把當(dāng)前盒的bottom與行盒的bottom對齊
<percentage>:把當(dāng)前盒提升(正值)或者降低(負值)這個距離,百分比相對line-height計算。當(dāng)值為0%時等同于baseline。
<length>:把當(dāng)前盒提升(正值)或者降低(負值)這個距離。當(dāng)值為0時等同于baseline。(CSS2)
對應(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參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.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 class="baseline"> <strong>與基線對齊</strong> <p>參考內(nèi)容<a href="?">基線對齊</a></p> </li> <li class="sub"> <strong>與參考內(nèi)容的下標(biāo)對齊</strong> <p>參考內(nèi)容<a href="?">下標(biāo)對齊</a></p> </li> <li class="super"> <strong>與參考內(nèi)容的上標(biāo)對齊</strong> <p>參考內(nèi)容<a href="?">上標(biāo)對齊</a></p> </li> <li class="top"> <strong>對象的內(nèi)容與對象頂端對齊</strong> <p>參考內(nèi)容<a href="?">要對齊的內(nèi)容</a></p> </li> <li class="text-top"> <strong>對象的文本與對象頂端對齊</strong> <p>參考內(nèi)容<a href="?">要對齊的內(nèi)容</a></p> </li> <li class="middle"> <strong>對象的內(nèi)容與對象中部對齊</strong> <p>參考內(nèi)容<a href="?">要對齊的內(nèi)容</a></p> </li> <li class="bottom"> <strong>對象的內(nèi)容與對象底端對齊</strong> <p>參考內(nèi)容<a href="?">要對齊的內(nèi)容</a></p> </li> <li class="text-bottom"> <strong>對象的文本與對象頂端對齊</strong> <p>參考內(nèi)容<a href="?">要對齊的內(nèi)容</a></p> </li> <li class="length"> <strong>與基線算起的偏移量</strong> <p>參考內(nèi)容<a href="?">偏移量對齊</a></p> </li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例