この記事の要点

vertical-align はインラインボックスとテーブルセル限定の縦方向揃え CSS プロパティ ブロックボックスや Flex / Grid のアイテムには効かない（Flex は align-items / align-self を使う） 主な値: baseline（既定）/ top / middle / bottom / sub / super / text-top / text-bottom / 長さ・% 画像と隣接テキストのズレや、テーブル内の縦揃えはこれの 1 行で解決することが多い img 下の隙間の典型対処: vertical-align: middle または display: block

vertical-align とは

vertical-align はインラインレベル要素（<span>, <img>, インラインブロック等）とテーブルセル（<td>, <th> または display: table-cell）の縦方向の揃え位置を指定する CSS プロパティです。

「縦方向の揃え」というと幅広く効きそうですが、適用範囲はインラインまたは table-cell に限定される点が最大の注意ポイントです。

構文

selector {
  vertical-align: <keyword> | <length> | <percentage>;
}

キーワード値の意味

値	意味	適用
baseline（既定）	親のベースラインに揃える	インライン
top	行ボックスの上端 / セルの上端	インライン / table-cell
middle	親の中央（x-height の中央）	インライン / table-cell
bottom	行ボックスの下端 / セルの下端	インライン / table-cell
text-top	親のフォントの上端	インライン
text-bottom	親のフォントの下端	インライン
sub	下付き文字位置	インライン
super	上付き文字位置	インライン
<length>（例: 4px, -2px）	ベースラインから上下にずらす	インライン
<percentage>（line-height 基準）	line-height の %でベースラインからずらす	インライン

インライン要素での使用例

テキストと画像を中央で揃える

<p>
  これは
  <img src="icon.png" alt="" style="vertical-align: middle; height: 20px">
  アイコンです
</p>

img は既定で baseline 配置のため、テキストよりやや沈んで見えます。middle を指定すると x-height の中央に揃い、自然な見た目になります。

下付き / 上付き文字

<p>水の化学式は H<span style="vertical-align: sub; font-size: .8em">2</span>O</p>
<p>E = mc<span style="vertical-align: super; font-size: .8em">2</span></p>

テーブルセルでの使用例

セル内の上下方向揃えはまさに vertical-align の独壇場です。

th, td {
  vertical-align: top;     /* セル上端揃え */
}
.center td {
  vertical-align: middle;  /* セル中央 */
}
.bottom td {
  vertical-align: bottom;  /* セル下端 */
}

典型的なトラブル：img の下にできる隙間

HTML で img をブロックで使うと、画像の下に 3〜5px ほどの隙間ができることがあります。これは img がインライン扱いで、フォントのディセンダー領域を確保しているために起こる「あるある」です。

対処法

/* 方法 1: middle に揃える */
img { vertical-align: middle; }

/* 方法 2: bottom に揃える */
img { vertical-align: bottom; }

/* 方法 3: ブロック化（一番確実） */
img { display: block; }

注意：ブロック要素や Flex アイテムには効かない

vertical-align はインラインまたは table-cell 限定です。以下は効きません。

状況	代わりに使うもの
ブロック要素（<div>）の中身を縦中央に	Flex（display: flex; align-items: center）
Flex アイテムを縦中央に	align-items / align-self
Grid セル内を縦中央に	align-items / align-self / place-items
絶対配置で中央	top: 50%; transform: translateY(-50%)

Flex に置き換える例

/* これは「効かない」 */
.box {
  height: 200px;
  vertical-align: middle;   /* ブロックなので無効 */
}

/* これが正解 */
.box {
  height: 200px;
  display: flex;
  align-items: center;       /* 縦方向中央 */
  justify-content: center;   /* 横方向中央 */
}

baseline の振る舞いを理解する

初期値 baseline は「親のベースライン」に対する揃えです。インライン要素同士でサイズが違うフォントを並べた時の挙動は、ベースラインで揃うことで保たれています。

<p>
  <span style="font-size: 16px">小さい</span>
  <span style="font-size: 36px">大きい</span>
  <span style="font-size: 16px">小さい</span>
</p>

上記は全てのテキストが下端ではなくベースラインで揃います。揃えたい位置を変えたいときに vertical-align を使います。

長さ・% 指定

キーワードでは表現しきれない微調整に使います。正値で上、負値で下に動かします。

.icon {
  vertical-align: -3px;   /* 3px 下にずらす */
}
.note {
  vertical-align: 30%;    /* line-height の 30% 上にずらす */
}

ブラウザ互換

vertical-align は CSS 1 から存在し、すべての主要ブラウザで完全サポートされています。挙動の差は基本的にありません。

FAQ

Q: div の中身を縦中央にしたい
A: vertical-align は使えません。Flex（display: flex; align-items: center）または Grid（place-items: center）を使ってください。

Q: テーブル風の中央揃えを div でも使いたい
A: display: table-cell を使えば vertical-align が効きます。ただし Flex のほうが一般的で柔軟です。

Q: 親のフォントを変えたら揃えが崩れた
A: middle は x-height 基準なので、フォントによって中央位置がズレます。完全な縦中央が要るなら Flex を使ってください。

関連

• white-spaceプロパティ
• テキスト — 親カテゴリ
• CSS — 上位カテゴリ
• line-height / display / align-items