CSSの「vertical-align」を完全攻略する──インラインレイアウトの深淵を覗く
フロントエンド開発の現場で、CSSの `vertical-align` に「なんとなく」手こずった経験はないだろうか？
「なぜか数ピクセルの隙間ができる」「画像とテキストが微妙にズレる」「`middle` を指定したのに真ん中に来ない」。これらは、CSSを書き始めた誰もが通る道だ。しかし、中級者へのステップアップを目指すなら、このプロパティを「魔法の調整ツール」として扱うのは卒業すべきだ。
今回は、ブラウザが裏側でどうやって「行（line-box）」を構築しているのか、その泥臭い仕組みから紐解いていこう。
—
vertical-alignは「親要素」ではなく「自分自身」の立ち位置を決める
まず大前提として、`vertical-align` は「インラインレベル」または「テーブルセル」の要素にしか効かない。FlexboxやGridの登場で影が薄くなったと感じるかもしれないが、アイコンとテキストを並べる、あるいは複雑なタイポグラフィを組む際には、依然として必須の知識だ。
ブラウザはテキストを表示する際、見えない「行ボックス（line-box）」を生成する。このボックス内には「ベースライン（文字が乗る線）」があり、`vertical-align` はそのベースラインを基準に、その要素をどこに配置するかを指示するものだ。
主要な値を理解する
- `baseline` (デフォルト): 要素のベースラインを、親のベースラインに合わせる。
- `middle`: 要素の中央を、親の「ベースライン + x-heightの半分」に合わせる。
- `top` / `bottom`: 行ボックスの頂点/底点に合わせる。
- `sub` / `super`: 下付き文字・上付き文字としての配置。
特に罠なのが `middle` だ。これは「中央」を意味するが、正確には「文字の高さの中央」を指す。フォントのレンダリングエンジンによってこの位置は微妙に異なるため、厳密な垂直中央揃えを求めるなら、Flexboxで `align-items: center` を使うのが現代の正解だ。
—
現場で即戦力となるサンプルコード
以下に、実務で頻出する「アイコンとテキストの並び」を想定したサンプルを用意した。ブラウザのデフォルト挙動を理解し、それを制御するテクニックだ。
テキストの調整術※1
vertical-align の挙動をマスターしよう。
—
なぜ「謎の隙間」が生まれるのか？
中級エンジニアが最も遭遇するトラブルが、`display: block` な画像（img）を並べた時に下にできる数ピクセルの隙間だ。
これは、`img` 要素のデフォルトの `vertical-align` が `baseline` になっているからだ。ブラウザは「画像も文字の一部である」と解釈し、アルファベットの「p」や「g」のディセンダ（下にはみ出す部分）のための余白を確保してしまう。
解決策はいたってシンプルだ：
img {
display: block; / そもそもインラインではなくブロックにしてしまう /
/ または /
vertical-align: bottom; / ベースラインの呪縛から解放する /
}
プロの視点：使い分けの指針
1. レイアウト全体: 迷わず Flexbox か Grid を使うこと。これらは `vertical-align` のような不安定な計算を必要としない。
2. 文章中の装飾: アイコン、注釈、コード、数式など、テキストの流れを止めないパーツには `vertical-align` が最適だ。
3. 微調整: `vertical-align` には数値（`px` や `%`）を指定できる。デザインカンプとの数ピクセルのズレを直すには、ここを「0.1px」単位で追い込むのが、職人の仕事だ。
`vertical-align` は、かつてWebデザインを支えた古の技術であり、今なお細部の美しさを担保するための「最後の砦」でもある。このプロパティを「なんとなく」で終わらせず、ブラウザが何を基準に線を引いているかを想像できるようになれば、あなたのCSSコーディングは一段と洗練されたものになるはずだ。
次は、ぜひ自分のプロジェクトで `vertical-align: -0.2em` などの細かい調整を試してみてほしい。その「ミリ単位のこだわり」こそが、一流のフロントエンドエンジニアの証なのだから。
コメント