vertical-align を理解すると「インライン要素のズレ」が自在にコントロールできる
vertical-align は名前だけ見ると「縦方向の中央揃え」に使えそうですが、実際は インライン要素・インラインブロック要素・テーブルセルの“基準線（ベースライン）”をどう揃えるかを決めるプロパティです。
つまり、テキストと画像のズレ、アイコンの上下位置、インラインブロックの縦位置などを調整するためのものです。
CSS と Tailwind CSS の両方で、初心者でも誤解しないように丁寧に解説します。
vertical-align が効く場面と効かない場面
vertical-align が効くのは「インライン系の文脈」
- inline（文字扱い）
- inline-block（小さな箱）
- table-cell（表のセル）
vertical-align が効かない場面
- display:block の要素
- flexbox の子要素
- grid の子要素
ここを誤解すると「vertical-align が効かない！」と混乱しやすいので重要です。
基本の値と動きの違い
vertical-align にはよく使う値がいくつかあります。
- baseline（初期値）
- middle
- top
- bottom
- text-top
- text-bottom
特に middle と baseline の違いを理解すると、画像やアイコンのズレが直感的に扱えるようになります。
baseline：文字の基準線に揃える（初期値）
CSS
img {
vertical-align: baseline;
}
HTML
テキスト <img src="icon.png"> テキスト
画像の下端が文字の基準線に揃うため、
画像が少し下にズレて見えることがあります。
middle：文字の中央に揃える（アイコン揃えの定番）
CSS
img {
vertical-align: middle;
}
Tailwind
<img src="icon.png" class="align-middle">
テキストとアイコンを自然に並べたいときの定番です。
top：行の上端に揃える
CSS
img {
vertical-align: top;
}
Tailwind
<img src="icon.png" class="align-top">
複数行のテキストと画像を並べるとき、
画像を上に揃えたい場合に使います。
bottom：行の下端に揃える
CSS
img {
vertical-align: bottom;
}
Tailwind
<img src="icon.png" class="align-bottom">
画像を行の下端に揃えたいときに使います。
text-top / text-bottom：文字の上下に揃える
CSS
img {
vertical-align: text-top;
}
Tailwind
<img src="icon.png" class="align-text-top">
文字の上端・下端に揃えるため、
フォントサイズが変わっても自然に揃います。
実践例：テキストとアイコンのズレを解消する
CSS版
.icon {
width: 20px;
height: 20px;
vertical-align: middle;
}
HTML
<span>お気に入り</span>
<img src="star.png" class="icon">
Tailwind版
<span>お気に入り</span>
<img src="star.png" class="w-5 h-5 align-middle">
アイコンがテキストの中央に揃い、自然な見た目になります。
実践例：インラインブロックの上下位置を揃える
CSS版
.box {
display: inline-block;
width: 80px;
height: 40px;
background: #ddd;
vertical-align: top;
}
HTML
<div class="box"></div>
<div class="box"></div>
Tailwind版
<div class="inline-block w-20 h-10 bg-gray-300 align-top"></div>
<div class="inline-block w-20 h-10 bg-gray-300 align-top"></div>
インラインブロックは「文字扱い」なので、
vertical-align が効きます。
実践例：画像の下に謎の余白ができる問題を解消
画像を inline のまま使うと、
baseline 揃えの影響で下に余白が出ることがあります。
CSS版（解決）
img {
vertical-align: bottom;
}
Tailwind版
<img src="photo.jpg" class="align-bottom">
これで画像の下の余白が消えます。
vertical-align の深掘りポイント
1. 「縦方向の中央揃え」ではない
vertical-align は インライン要素の基準線を揃えるためのプロパティであり、
ブロック要素の中央揃えには使えません。
ブロック要素の中央揃えは flexbox を使います。
display: flex;
align-items: center;
2. inline-block のズレは vertical-align で調整する
inline-block は文字扱いなので、
baseline 揃えの影響で上下にズレることがあります。
その場合は align-top や align-middle を使うと揃います。
3. 画像の下にできる余白は baseline が原因
画像は baseline に揃うため、
文字の descender（g, y の下の部分）分の余白ができます。
align-bottom や block 化で解消できます。
4. Tailwind の align-* は vertical-align のラッパー
Tailwind のクラスは次のように対応しています。
- align-baseline → vertical-align: baseline
- align-top → vertical-align: top
- align-middle → vertical-align: middle
- align-bottom → vertical-align: bottom
- align-text-top → vertical-align: text-top
- align-text-bottom → vertical-align: text-bottom
まとめ
vertical-align は、インライン要素やインラインブロックの上下位置を調整するためのプロパティです。
- baseline → 初期値。画像が少し下にズレる原因
- middle → テキストとアイコンを自然に揃える
- top / bottom → 行の上下に揃える
- text-top / text-bottom → 文字の上下に揃える
- Tailwind では align-* クラスで指定
テキストと画像のズレ、アイコンの位置調整、インラインブロックの揃えなど、
細かい見た目の調整にとても役立ちます。
