vertical-align

語法:

vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

預設值baseline

適用於:內聯級與 table-cell 元素

繼承性:無

動畫性:當值為 <length>

計算值:指定值

媒 體:視覺

取值:

baseline:
把目前盒的基線與父級盒的基線對齊。如果該盒沒有基線,就將底部外邊距的邊界和父級的基線對齊
sub:
把目前盒的基線降低到合適的位置作為父級盒的下標(該值不影響該元素文字的字體大小)
super:
把目前盒的基線提升到合適的位置作為父級盒的上標(該值不影響該元素文字的字體大小)
text-top:
把目前盒的top和父級的內容區的top對齊
text-bottom:
把目前盒的bottom和父級的內容區的bottom對齊
middle:
把目前盒的垂直中心和父級盒的基線加上父級的半x-height對齊
top:
把目前盒的top與行盒的top對齊
bottom:
把目前盒的bottom與行盒的bottom對齊
<percentage>
把目前盒提升(正值)或者降低(負值)這個距離,百分比相對line-height計算。當值為0%時等同於baseline。
<length>
把目前盒提升(正值)或者降低(負值)這個距離。當值為0時等同於baseline。(CSS2)

說明:

定義行內元素在行框內的垂直對齊方式。
  • 對應的腳本特性為:verticalAlign

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+

示例: