垂直方向の配置

インラインボックスまたはテーブルセルボックスの垂直方向の配置を制御するためのユーティリティ。

Class reference

Class
Properties
.align-baselinevertical-align: baseline;
.align-topvertical-align: top;
.align-middlevertical-align: middle;
.align-bottomvertical-align: bottom;
.align-text-topvertical-align: text-top;
.align-text-bottomvertical-align: text-bottom;

Baseline

.align-baselineを使用して、要素のベースラインをその親のベースラインに揃えます。

.align-baseline
<span class="inline-block align-baseline ...">...</span>

Top

.align-topを使用して、要素とその子孫の上部を行全体の上部に揃えます。

.align-top
<span class="inline-block align-top ...">...</span>

Middle

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

.align-middle
<span class="inline-block align-middle ...">...</span>

Bottom

.align-bottomを使用して、要素とその子孫の下部を行全体の下部に揃えます。

.align-bottom
<span class="inline-block align-bottom ...">...</span>

Text Top

.align-text-topを使用して、要素の上部を親要素のフォントの上部に揃えます。

.align-text-top
<span class="inline-block align-text-top ...">...</span>

Text Bottom

.align-text-bottomを使用して、要素の下部を親要素のフォントの下部に揃えます。

.align-text-bottom
<span class="inline-block align-text-bottom ...">...</span>

Responsive

特定のブレークポイントでのみ垂直方向の配置を制御するには、既存の垂直方向の配置ユーティリティに{screen}:プレフィックスを追加します。 たとえば、クラスmd:align-topを要素に追加すると、中程度の画面サイズ以上でalign-topユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<div class="leading-none relative">
  <span class="align-top sm:align-middle md:align-bottom lg:align-text-top xl:align-text-bottom ...">...</span>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customizing

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはvertical-alignment utilitiesのために作られます。

あなたはどのバリアントがvertical-alignment utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのverticalAlignプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     verticalAlign: ['responsive'],
+     verticalAlign: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしvertical-alignment utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのverticalAlign propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     verticalAlign: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!