vertical-align:インライン要素や表のセルに対して縦方向の揃える位置を指定する

初期値 baseline
適用対象 インラインレベル要素、テーブルセル要素。::first-letterおよび::first-line
継承 しない
アニメーション <length>値
対応ブラウザ caniuseで確認

vertical-alignプロパティの説明

vertical-alignは、インライン要素や表のセルに対して縦方向の揃える位置を指定します。この機能はインラインレベルの空間を共有する要素同士の相対的な位置を示すものです。ボックスが分かれてしまい個別の空間を作るブロックレベルの縦位置には作用しません。

vertical-alignというプロパティ名を見ると、text-alignの効果と似たような使い方をイメージしてしまいますが、本プロパティの挙動には少し慣れが必要です。

vertical-alignに指定できる値

親要素との相対値

以下に示す値は、親要素に対する垂直方向の配置方法を表します。インライン要素に対して適用できます。

baseline
指定された要素のベースラインを、親要素のベースラインに揃えます。一部の置換要素のベースラインは、HTMLの仕様上で未定義であるため、ブラウザの挙動に依存します。
text-top
指定された要素の上端を、親要素のフォントの上端に揃えます。
text-bottom
指定された要素の下端を、親要素のフォントの下端に揃えます。
middle
指定された要素の中央を、親要素のbaseline + x-heightの半分に揃えます。
sub
指定された要素のベースライン、を親要素のsubscript-baselineに揃えます。
super
指定された要素のベースラインを、親要素のsuperscript-baselineに揃えます。
<length>
指定された要素のベースラインを、親要素のベースラインから値の距離だけ移動します。正の値は上方向へ、負の値は下方向へ移動します。
<percentage>
指定された要素のベースラインを、親要素のベースラインからline-heightに対する割合で移動します。正の値は上方向へ、負の値は下方向へ移動します。

行ボックスに対する相対値

以下に示す値は、行ボックスの寸法に対して垂直方向の配置方法を示すものです。インライン要素に対して適用できます。

top
要素の上端を行ボックスの上端に揃えます。
bottom
要素の上端を行ボックスの下端に揃えます。ベースラインを持たない要素では、マージン・エリアの境界が下端となります。

表のセル用の値

以下に示す値は、テーブルのセルに作用するものです。

top
指定されたセルの上辺にあたるパディング・エリアの縁を行の上端に揃えます。
middle
指定されたセルのパディング・ボックスを行の中央に揃えます。
bottom
指定されたセルの下辺にあたるパディング・エリアの縁を行の下端に揃えます。
baseline
セルのベースラインを、行内でベースラインを揃えた他のすべてのセルのベースラインに揃えます。text-toptext-bottomsubsupersubsub<length><percentage>を使用した場合も、同じ挙動を示します。

vertical-alignの使い方とサンプル

vertical-alignプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
vertical-align: baseline;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
vertical-align: sub;
vertical-align: super;

/* <length>値 */
vertical-align: 1em;
vertical-align: 20px;
vertical-align: -10vmin;

/* <percentage>値 */
vertical-align: 10%;
vertical-align: -10%;

/* グローバル値 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

vertical-alignの実例

それでは実際にvertical-alignプロパティの書き方を見ていきましょう。以下の例は、インライン行の空間を共有する画像とテキストを用意し、画像の縦位置の寄せ方を変更した時の比較です。

基本的には、親要素が作成したベースラインを基準に相対的な位置の変化が起こります。該当する要素の移動距離が大きい場合に、後続するテキストの位置が変わっているように見えますが、あくまで移動しているのは画像の方です。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > div {
	margin: .5rem 0 0;
	background: linear-gradient( transparent 90%, rgba(102, 255, 255, .3) 90%);
}
div > img {
	width: 100px;
	height: 50px;
	margin-right: .5rem;
}
.va_1 {
	vertical-align: baseline;
}
.va_2 {
	vertical-align: text-top;
}
.va_3 {
	vertical-align: text-bottom;
}
.va_4 {
	vertical-align: middle;
}
.va_5 {
	vertical-align: sub;
}
.va_6 {
	vertical-align: super;
}
.va_7 {
	vertical-align: 10px;
}
.va_8 {
	vertical-align: -2em;
}
HTML
<div class="samp_box">
	<section>
		<h1>vertical-align: baseline;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_1">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: text-top;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_2">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: text-bottom;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_3">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: middle;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_4">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: sub;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_5">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: super;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_6">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: 10px;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_7">
			Text text text.
		</div>
	</section>
	<section>
		<h1>vertical-align: -2em;</h1>
		<div>
			<img src="../images/sample_img100x50.png" alt="img" class="va_8">
			Text text text.
		</div>
	</section>
</div>

表のセルに対する指定

vertical-alignを表(table)のセルに適用した場合は、セルの内容を揃える垂直の位置が変わります。効果はセルの中で完結するため、隣接するセルには影響しません。全てのセルの揃え位置を統一する場合は、<th><td>に対して一括で指定します。

表示確認
CSS
table.samp_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	background-color: #fff;
	font-size: 0.875rem;
}
table th,
table td {
	padding: .3rem;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
}
table th {
	background-color: #eee;
}
table th[scope="row"] {
	height: 6rem;
}
table td[class] {
	text-decoration: underline red;
}
.va_1 {
	vertical-align: top;
}
.va_2 {
	vertical-align: middle;
}
.va_3 {
	vertical-align: bottom;
}
.va_4 {
	vertical-align: baseline;
}
HTML
<table class="samp_table">
	<tr>
		<th>Value</th>
		<th>Sample</th>
		<th>ex</th>
	</tr>
	<tr>
		<th scope="row">top</th>
		<td class="va_1">表示確認</td>
		<td>隣接セル</td>
	</tr>
	<tr>
		<th scope="row">middle</th>
		<td class="va_2">表示確認</td>
		<td>隣接セル</td>
	</tr>
	<tr>
		<th scope="row">bottom</th>
		<td class="va_3">表示確認</td>
		<td>隣接セル</td>
	</tr>
	<tr>
		<th scope="row">baseline</th>
		<td class="va_4">表示確認</td>
		<td>隣接セル</td>
	</tr>
</table>

vertical-alignに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する