なぜ、`vertical-align` はいつも僕たちを裏切るのか？
フロントエンドの世界に入って数年、「CSSの垂直中央揃え」に一度も絶望したことがないエンジニアはいないはずだ。特にインライン要素の調整に使われる `vertical-align` は、一見直感的でありながら、実際に触ってみると「あれ？なんで1pxズレてるんだ？」という事態が頻発する。
このプロパティがなぜ「魔境」と呼ばれるのか。それは、多くのエンジニアが「ボックスの真ん中に揃えるプロパティ」だと誤解しているからだ。実はこれ、「インラインボックスの基準線（baseline）をどう扱うか」を決めるためのプロパティに過ぎない。
今日は、ブラウザが裏側で何をやっているのかを解き明かし、実務で明日から使える「賢い付き合い方」を伝授しよう。
—
ブラウザの裏側：インラインボックスの「見えない基準線」
`vertical-align` を理解する鍵は、ブラウザがテキストをどのようにレイアウトしているかを知ることにある。
テキストは、仮想的な線の上に乗っている。この線の名前が「ベースライン（baseline）」だ。アルファベットの「x」の底辺をイメージしてほしい。`vertical-align: baseline` が初期値である以上、ブラウザは「何がなんでもベースラインを合わせるぞ」という強い意志でレンダリングを行う。
ここで罠がある。`img` や `span` などのインライン要素を並べたとき、これらは親要素のフォントの「ディセンダ（gやyの下にはみ出る部分）」の余白を考慮して配置される。これが、アイコンとテキストを並べた時に微妙にズレる最大の原因だ。
主要な値が持つ「本来の役割」
- baseline: 親要素のベースラインに合わせる。初期値。
- middle: 要素の中央を、親要素の「ベースライン + x-heightの半分」に合わせる。厳密な「中央」ではない。
- top / bottom: 行ボックス（line-box）の最上部、最下部に合わせる。
—
実践：アイコンとテキストの「美しい整列」
実務で最も多いのが「テキストの横にアイコンを並べる」というUIだ。これをCSSだけでピタッと合わせるためのベストプラクティスを紹介する。
現場で使うべき「鉄板」コード
垂直方向の調整は、これで迷わない。
—
避けて通れない「1pxのズレ」を解決するTips
どんなに理論武装しても、フォントの種類やアイコンのSVGのパディングによっては「微妙なズレ」が残ることがある。その際、安易に `position: relative; top: 1px;` を叩き込む前に、以下のチェックリストを思い出してほしい。
1. `line-height` は整数か？: `line-height: 20px;` のように固定値を与えると、ブラウザの計算誤差が出にくい。
2. 親要素の `font-size` は0ではないか？: 稀にインライン要素の隙間を消すために `font-size: 0;` を親に当てる手法があるが、これを使うと `vertical-align` は途端に機能不全に陥る。
3. Flexboxの検討: 現代のフロントエンド開発において、`vertical-align` はあくまで「どうしてもインライン要素として扱わなければならない時（CMS内のテキストなど）」の最終手段だ。可能な限り `display: flex; align-items: center;` を使う方が、精神衛生上よほど健全である。
最後に：ツールに振り回されるな
`vertical-align` は、かつてのテーブルレイアウト時代の名残を色濃く残したプロパティだ。仕様を深く理解することは重要だが、それに執着しすぎてコードを複雑にするのは本末転倒だ。「なぜかズレる」という現象に遭遇した時、ブラウザが「ベースラインという目に見えない基準」と戦っていることを思い出せれば、君のデバッグ能力は格段に向上するはずだ。
綺麗なUIは、こうした地味な仕様の積み重ねでできている。明日からのコーディングで、ぜひこの「基準線」の概念を意識してみてほしい。
コメント