メインコンテンツへスキップ

縦の配置ユーティリティ(Vertical alignment)

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

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
【注意】

 

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities 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
    ),