排版
vertical-align
用於控制行內或表格儲存格框的垂直對齊方式的工具類別。
| 類別 | 樣式 |
|---|---|
align-baseline | vertical-align: baseline; |
align-top | vertical-align: top; |
align-middle | vertical-align: middle; |
align-bottom | vertical-align: bottom; |
align-text-top | vertical-align: text-top; |
align-text-bottom | vertical-align: text-bottom; |
align-sub | vertical-align: sub; |
align-super | vertical-align: super; |
align-(<custom-property>) | vertical-align: var(<custom-property>); |
align-[<value>] | vertical-align: <value>; |
範例
對齊基準線
使用 align-baseline 工具類別將元素的基準線與其父元素的基準線對齊
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-baseline">The quick brown fox...</span>對齊頂部
使用 align-top 工具類別將元素及其後代的頂部與整行的頂部對齊
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-top">The quick brown fox...</span>對齊中間
使用 align-middle 工具類別將元素的中心與基準線加上父元素 x 高度的一半對齊
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-middle">The quick brown fox...</span>對齊底部
使用 align-bottom 工具類別將元素及其後代的底部與整行的底部對齊
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-bottom">The quick brown fox...</span>對齊父元素頂部
使用 align-text-top 工具類別將元素的頂部與父元素字體的頂部對齊
敏捷的棕色狐狸跳過懶惰的狗。
<span class="inline-block align-text-top">The quick brown fox...</span>對齊父元素的底部
使用 align-text-bottom 工具來對齊元素底部與父元素字體的底部
敏捷的棕色狐狸跳過懶惰的狗。
<span class="inline-block align-text-bottom">The quick brown fox...</span>使用自訂值
使用 align-[<value>] 語法 來設定垂直對齊基於完全自訂的值
<span class="align-[4px] ..."> <!-- ... --></span>對於 CSS 變數，您也可以使用 align-(<custom-property>) 語法
<span class="align-(--my-alignment) ..."> <!-- ... --></span>這只是 align-[var(<custom-property>)] 的簡寫，會自動為您加入 var() 函式。
響應式設計
前綴一個 vertical-align 工具 使用斷點變體，如 md:，僅在中等 螢幕尺寸及以上時套用該工具
<span class="align-middle md:align-top ..."> <!-- ... --></span>在 變體文件 中了解更多關於使用變體的資訊。
