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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

縦の配置ユーティリティ（Vertical alignment） v4.0.0新設

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 から必要に応じて選択。

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

【注意】

ページ移動