なぜ `vertical-align` は思い通りにならないのか？インラインの垂直整列を「完全に理解する」ための解剖学
フロントエンドの世界に入って数年、「`vertical-align: middle` を指定したのに、なんか微妙にズレている」という現象に頭を抱えたことはありませんか？
CSSを触り始めた頃は「とりあえず `middle` にすれば真ん中に来るはず」と信じて疑わなかった魔法のプロパティ。しかし、FlexboxやGrid全盛の現代でも、テキストとアイコンを並べたり、`inline-block` でレイアウトを組んだりする場面において、この `vertical-align` の挙動を理解しているか否かで、コーディングの精度は劇的に変わります。
今日は、ブラウザが裏側で一体何を計算しているのか、その「泥臭いメカニズム」を解き明かしていきましょう。
—
1. そもそも「ベースライン」とは何か
`vertical-align` を攻略する鍵は、CSSの仕様書に登場する「フォントのメトリクス（文字の骨格）」を理解することにあります。
特に重要なのが、ベースライン（baseline） です。これは、アルファベットの「x」や「a」などの小文字が腰を下ろしている仮想の線のこと。ブラウザはデフォルトで、このベースラインを基準にインライン要素を整列させます。
しかし、フォントにはベースラインの下にも「ディセンダー（gやyの突き出し部分）」があり、上には「アセンダー」や「キャップハイト」が存在します。`vertical-align` は、単に要素の「高さの真ん中」を取っているわけではなく、この複雑なフォントのメトリクスを考慮しながら、行ボックス（line-box）の中で位置を調整しているのです。
2. 主要な値が「何に対して」整列しているのか
現場でよく使う値を、ブラウザの視点で整理してみましょう。
- `baseline` (初期値): 親要素のベースラインに、対象要素のベースラインを合わせます。アイコンとテキストを並べると、アイコンの下辺がテキストのベースラインに乗ってしまい、微妙に浮いて見えるのはこれが原因です。
- `middle`: 要素の「中点（高さの半分）」と、親要素の「ベースライン + x-heightの半分」を合わせます。厳密な「垂直中央」ではないため、フォントの種類によっては数ピクセルずれます。
- `top` / `bottom`: 行ボックス全体（その行で最も背の高い要素の頂点や底辺）に対して、対象要素の端を合わせます。
ここでの落とし穴は、「親要素が行ボックスの高さ（line-height）をどう決定しているか」 という点です。`line-height` がタイトだと、`top` や `bottom` を指定しても、親の行ボックスそのものが小さいため、変化がほとんど見えないことがあります。
—
3. 実践：アイコンとテキストを「完璧に」揃える
現場で最も頻発する「アイコンとテキストのズレ」を解消する、最も堅牢な手法を紹介します。`vertical-align: middle` を当てるだけでは心許ない場合、以下の構成がベストプラクティスです。
—
4. なぜ「微調整」が必要なのか
正直に言います。`vertical-align` だけで完璧な「数学的中央」を出すのは、フォント自体のデザイン（グリフの重心）に依存するため、非常に困難です。
プロの現場では、以下のような「泥臭い知見」を組み合わせて完成度を高めます。
1. `line-height` を整える: `line-height` を `1` に近づけると、行ボックスの余白が減り、`vertical-align` の挙動が予測可能になります。
2. `display: inline-flex` への移行: 可能な限り `vertical-align` で戦うのをやめ、Flexboxの `align-items: center` を使うのが、モダンな開発における最も「コストが低く、かつ正確な」手法です。
3. 負のマージンでの補正: どうしてもインライン要素として配置しなければならない（テキストの中間にアイコンを挿入するなど）場合は、`margin-top: -1px` のような微調整を恐れてはいけません。これは「バグ」ではなく、フォントの特性に対する「適切な補正」です。
まとめ
`vertical-align` は、CSSの中でも特に「ブラウザのレンダリングエンジンとフォントの歴史」が色濃く残っているプロパティです。
- `baseline` がデフォルトであるという仕様を理解する
- Flexboxが使えるならそちらを優先する
- どうしても使う場合は、フォントのメトリクスによる「ズレ」を許容し、必要に応じて微調整する
この3点を押さえておくだけで、あなたのコーディングは「なぜかズレる」というストレスから解放され、より論理的でメンテナンス性の高いものになるはずです。もし後輩が「`vertical-align` が効かない！」と叫んでいたら、ぜひ「それはフォントのベースラインのせいだよ」と教えてあげてください。それが、シニアエンジニアとしての第一歩です。
コメント