?
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默認(rèn)值:baseline
適用于:內(nèi)聯(lián)級(jí)與 table-cell 元素
繼承性:無(wú)
動(dòng)畫(huà)性:當(dāng)值為 <length> 時(shí)
計(jì)算值:指定值
baseline:把當(dāng)前盒的基線與父級(jí)盒的基線對(duì)齊。如果該盒沒(méi)有基線,就將底部外邊距的邊界和父級(jí)的基線對(duì)齊
sub:把當(dāng)前盒的基線降低到合適的位置作為父級(jí)盒的下標(biāo)(該值不影響該元素文本的字體大?。?/p>
super:把當(dāng)前盒的基線提升到合適的位置作為父級(jí)盒的上標(biāo)(該值不影響該元素文本的字體大?。?/p>
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)
對(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è)系列</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>與基線對(duì)齊</strong> <p>參考內(nèi)容<a href="?">基線對(duì)齊</a></p> </li> <li class="sub"> <strong>與參考內(nèi)容的下標(biāo)對(duì)齊</strong> <p>參考內(nèi)容<a href="?">下標(biāo)對(duì)齊</a></p> </li> <li class="super"> <strong>與參考內(nèi)容的上標(biāo)對(duì)齊</strong> <p>參考內(nèi)容<a href="?">上標(biāo)對(duì)齊</a></p> </li> <li class="top"> <strong>對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊</strong> <p>參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a></p> </li> <li class="text-top"> <strong>對(duì)象的文本與對(duì)象頂端對(duì)齊</strong> <p>參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a></p> </li> <li class="middle"> <strong>對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊</strong> <p>參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a></p> </li> <li class="bottom"> <strong>對(duì)象的內(nèi)容與對(duì)象底端對(duì)齊</strong> <p>參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a></p> </li> <li class="text-bottom"> <strong>對(duì)象的文本與對(duì)象頂端對(duì)齊</strong> <p>參考內(nèi)容<a href="?">要對(duì)齊的內(nèi)容</a></p> </li> <li class="length"> <strong>與基線算起的偏移量</strong> <p>參考內(nèi)容<a href="?">偏移量對(duì)齊</a></p> </li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例