vertical-align

例

ベースラインに揃える

要素のベースラインを親のベースラインに揃えるには、align-baseline ユーティリティを使用します。

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

上部に揃える

要素とその子孫の上部を、行全体の上部に揃えるには、align-top ユーティリティを使用します。

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

中央に揃える

要素の中央を、親の x-height の半分にベースラインを加えた位置に揃えるには、align-middle ユーティリティを使用します。

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

下部に揃える

要素とその子孫の下部を行全体の下部に揃えるには、align-bottom ユーティリティを使用します。

<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: のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium 画面サイズ以上

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。