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

縦の配置ユーティリティ(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>
<span class="align-top">上端揃え</span>
<span class="align-middle">中央揃え</span>
<span class="align-bottom">下端揃え</span>
<span class="align-text-top">テキストの上端揃え</span>
<span class="align-text-bottom">テキストの下端揃え</span>

2. 表のセルの場合

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