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

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

※"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

【注意】

横方向の配置を設定する場合は、横の配置ユーティリティに記載
Flexboxでの上揃え/下揃え等については、交差軸方向のアイテムの整列に記載

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
),

前のページ
テキストユーティリティ

次のページ
可視性ユーティリティ