vertical-align

範例（Examples）

對齊基線（Aligning to baseline）

使用 align-baseline 通用類別將元素的基線與其父元素的基線對齊：

<span class="inline-block align-baseline">The quick brown fox...</span>

對齊頂部（Aligning to top）

使用 align-top 通用類別將元素及其子元素的頂部與整行的頂部對齊：

<span class="inline-block align-top">The quick brown fox...</span>

對齊中間（Aligning to middle）

使用 align-middle 通用類別將元素的中間與父元素的基線加上半個 x 字高的位置對齊：

<span class="inline-block align-middle">The quick brown fox...</span>

對齊底部（Aligning to bottom）

使用 align-bottom 通用類別將元素及其子元素的底部與整行的底部對齊：

<span class="inline-block align-bottom">The quick brown fox...</span>

對齊父元素頂部（Aligning to parent top）

使用 align-text-top 通用類別將元素的頂部與父元素字型的頂部對齊：

<span class="inline-block align-text-top">The quick brown fox...</span>

對齊父元素底部（Aligning to parent bottom）

使用 align-text-bottom 通用類別將元素的底部與父元素字型的底部對齊：

<span class="inline-block align-text-bottom">The quick brown fox...</span>

使用自訂值（Using a custom value）

使用 align-[<value>] 語法，根據完全自訂的值來設定 vertical alignment：

<span class="align-[4px] ...">  <!-- ... --></span>

對於 CSS 變數，你也可以使用 align-(<custom-property>) 語法：

<span class="align-(--my-alignment) ...">  <!-- ... --></span>

這只是 align-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 vertical-align 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<span class="align-middle md:align-top ...">  <!-- ... --></span>

在變體文件中了解更多關於使用變體的資訊。