なぜ「vertical-align: middle」は期待通りに動かないのか？インライン要素の深淵を解き明かす
実務でCSSを書いていて、一度は必ず壁にぶつかるのが`vertical-align`ではないでしょうか。
「アイコンとテキストを横並びにして、`vertical-align: middle`を当てたのに、数ピクセル浮いている（あるいは沈んでいる）……」
後輩からそんな相談を受けるたび、私はこう答えます。「それは、あなたが『ブラウザが描画するフォントの基準線』という見えない支配者と戦っているからだよ」と。
今日は、CSSの中でも特に「なんとなく」で使われがちな`vertical-align`の仕様と、その裏側で何が起きているのかを、現場の泥臭い知見を交えて解説します。
—
1. vertical-alignの「正体」を知る
まず大前提として、`vertical-align`は「ブロックレベル要素」には効きません。 これはCSSの仕様（CSS Inline Layout Module）で決まっています。対象となるのは`inline`要素、または`inline-block`要素、そして`table-cell`だけです。
ここで多くのエンジニアが躓くポイントは、このプロパティが「要素そのもの」を動かしているのではなく、「行ボックス（Line Box）の中での配置」を制御しているという点です。
ブラウザが裏側で見ている「4つの線」
ブラウザはテキストを一行としてレンダリングする際、以下の基準線を計算しています。
- ベースライン (Baseline): アルファベットの「x」や「a」の底辺が乗る線。
- 中線 (Middle): x-height（xの高さ）の半分。
- アセンダライン / ディセンダライン: 文字の「上端」と「下端」の限界点。
`vertical-align: middle`を指定すると、ブラウザは「その要素の中点」と「親要素のベースライン ＋ x-heightの半分」を合わせようとします。つまり、フォントの種類やline-heightの設定次第で、基準となる「中点」の位置が微妙にズレるため、デザイン上の厳密な中央揃えにならないのです。
—
2. 実務で遭遇する「謎の隙間」の正体
インライン要素（`img`や`span`など）を横に並べたとき、親要素のブロックの下側にわずかな隙間ができる現象に遭遇したことはありませんか？
これは、「デフォルトの`vertical-align`が`baseline`だから」です。
テキストのディセンダ（g, j, p, q, yの下にはみ出す部分）を配置するためのスペースが確保されているため、親の`div`がテキストに合わせて微妙に背が高くなっているのです。
解決策：ベストプラクティス
この隙間を消すには、インライン要素（特にアイコンなど）に対して`vertical-align: middle`を当てるか、あるいは`display: block`にしてしまうのが手っ取り早い解決策です。
—
3. 実践：現場で使える「揃え」のコード例
では、実際に現場でよく使う「アイコン＋テキスト」の美しい配置パターンを提示します。これをベースに、プロジェクトごとのフォント設定に合わせて微調整するのが最も効率的です。
垂直方向の配置を極める
—
4. シニアからのアドバイス：Flexboxとの使い分け
ここまで`vertical-align`の話をしてきましたが、現代のフロントエンド開発において、垂直方向の配置は「Flexbox（あるいはGrid）」を使うのが圧倒的に主流であり、正解です。
`display: flex; align-items: center;` を使えば、フォントのベースラインやx-heightの計算に悩まされることは一切なくなります。
では、なぜ`vertical-align`を学ぶ必要があるのか？
それは、「既存のCMSのスタイルを修正する時」や「メールマガジンのHTMLコーディング」といった、Flexboxが使えない（あるいは壊れる）環境で、泥臭いマークアップを求められた時に、この知識が最強の武器になるからです。
まとめ：今日から意識すべきこと
1. `vertical-align`は「行ボックス」という仮想の線の上での振る舞いであると理解する。
2. 「謎の隙間」の原因はベースラインにあると疑う。
3. 基本はFlexbox。しかし、インライン要素の制御が必要な時は、この記事のロジックを思い出す。
技術は魔法ではありません。すべてはブラウザのレンダリング仕様というロジックに基づいています。この「中身」を理解すれば、もうデザイン崩れに怯えることはありません。自信を持って、美しいコードを書いていきましょう。
コメント