メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

縦の配置ユーティリティ（Vertical alignment）

inline, inline-block, inline-table, および表のセル要素の垂直方向の配置を簡単に変更できる。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

vertical-alignment ユーティリティで要素の配置を変更する。vertical-alignは、inline, inline-block, inline-table、表のセル要素にのみ影響するので注意。

.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top から必要に応じて選択。

インラインでないコンテンツ（<div> など）を垂直方向に中央揃えするには、Flexユーティリティの交差軸方向のアイテムの整列を使用。

1. インライン要素の場合

見本
ベースライン 上端揃え 中央揃え 下端揃え テキストの上端揃え テキストの下端揃え
設定例
<span class="align-baseline">ベースライン</span>

2. 表のセルの場合

見本
ベースライン 上端揃え 中央揃え 下端揃え テキストの上端揃え テキストの下端揃え
設定例
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">ベースライン</td>
    </tr>
  </tbody>
</table>
【設定】
  • ベースライン（vertical-align: baseline）：.align-baseline
  • 上端揃え（vertical-align: top）：.align-top
  • 中央揃え（vertical-align: middle）：.align-middle
  • 下端揃え（vertical-align: bottom）：.align-bottom
  • テキストの上端揃え（vertical-align: text-top）：.align-text-top
  • テキストの下端揃え（vertical-align: text-bottom）：.align-text-bottom
【注意】

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更

縦の配置ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-vertical-align の設定"align": (
  property: vertical-align,
  class: align,
  values: baseline top middle bottom text-bottom text-top
),