CSS vertical-align 屬性
示例
垂直對齊影像
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
自己動手試一試 »
定義和用法
vertical-align 屬性設定元素的垂直對齊方式。
| 預設值 | baseline（基線） |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀關於 animatable 的內容 嘗試 |
| 版本 | CSS1 |
| JavaScript 語法 | object.style.verticalAlign="top" 嘗試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| vertical-align | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS 語法
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| baseline（基線） | 元素與父元素的基線對齊。這是預設值 | 演示 ❯ |
| length | 透過指定的長度提高或降低元素。允許使用負值。 閱讀關於長度單位的內容 | 演示 ❯ |
| % | 透過“line-height”屬性的百分比提高或降低元素。允許使用負值。 | 演示 ❯ |
| sub（下標） | 元素與父元素的下標基線對齊 | 演示 ❯ |
| super | 元素與父元素的上標基線對齊 | 演示 ❯ |
| top | 元素與行上最高元素的頂部對齊 | 演示 ❯ |
| text-top | 元素與父元素字型的頂部對齊 | 演示 ❯ |
| middle（居中） | 元素位於父元素的中間 | 演示 ❯ |
| bottom | 元素與行上最低的元素對齊 | 演示 ❯ |
| text-bottom | 元素與父元素字型的底部對齊 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程：CSS 文字對齊
HTML DOM 參考： verticalAlign 屬性
