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

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-top、text-bottom、sub、super、sub、sub、<length>、<percentage>を使用した場合も、同じ挙動を示します。

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

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

/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、インライン行の空間を共有する画像とテキストを用意し、画像の縦位置の寄せ方を変更した時の比較です。

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

.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;
}

<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>に対して一括で指定します。

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;
}

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