【実務・中級編】vertical-alignプロパティによる垂直配置 – HTML実践ガイド

なぜ「vertical-align」は思い通りにならないのか？インライン要素の垂直整列を極める

フロントエンドの現場で「アイコンとテキストを横並びにしたとき、微妙にズレている」という問題に直面したことはありませんか？

CSSを触り始めて最初にぶつかる壁のひとつが `vertical-align` です。「垂直方向に揃えるためのプロパティ」と安易に考えていると、なぜか親要素の高さが変わったり、指定した要素がビクともしなかったりと、泥沼にハマることになります。

今回は、この「インライン要素の垂直整列」という奥深い魔境を、ブラウザのレンダリングの仕組みから紐解いていきましょう。

1. 「vertical-align」が効かないという誤解を解く

まず大前提として、`vertical-align` は「インライン要素」または「インラインブロック要素（display: inline-block）」に対してのみ有効です。ブロックレベル要素に適用しても無意味です。

そして、最も重要なポイントは、「vertical-alignは、親要素ではなく『行ボックス（line-box）』の中での位置を決めるもの」だということ。

ブラウザはテキストを表示する際、行の高さである `line-height` を基準とした「仮想的な枠（インラインボックス）」を生成します。`vertical-align` は、その枠の中でその要素が上下にどう位置するかを決定するスイッチに過ぎません。

ブラウザの裏側の動き

親要素の `line-height` が `1.5` だとしたら、ブラウザは文字のフォントメトリクス（ベースラインやアセンダ、ディセンダ）を計算し、行ボックスを構築します。`vertical-align: middle` を指定した要素は、その親の「行の中央」ではなく、「親のフォントのx-height（xの高さ）の半分」を基準に計算されるため、フォントの種類やサイズによって微妙なズレが生じるのです。これが「なんとなくズレている」の正体です。

2. 実務で「今すぐ使える」ベストプラクティス

現場で最もよくある「アイコンとテキストの整列」を例に、最も堅実な書き方を紹介します。

/

• 現場で多用するインライン整列のベストプラクティス
• 厳密なセンター揃えが必要な場合はFlexboxを推奨しますが、
• テキストの一部としてアイコンを挿入する場合はこれが最短です。

/
.icon-text-wrapper {
display: inline-flex; / 現代ではvertical-alignよりflexが安定 /
align-items: center; / これが最も計算負荷が低く、直感的 /
}

/

• レガシーな環境や、どうしてもインライン要素として扱いたい場合

/
.icon-legacy {
display: inline-block;
vertical-align: middle; / 行ボックスのベースラインから微調整 /
margin-top: -2px; / フォント特有の余白を微調整する泥臭いテクニック /
}

3. 実践コード：アイコンとテキストを完璧に揃える

以下のコードをコピーして、エディタで確認してみてください。インライン要素を扱う際の「ベースライン」の概念がよく分かります。

4. なぜ「Flexbox」があるのに学ぶ必要があるのか

「今どきFlexboxを使えばいいのでは？」という声が聞こえてきそうですね。その通り、レイアウトの9割はFlexboxで解決します。しかし、以下のケースでは依然として `vertical-align` の知識が必須です。

• 動的なテキストコンテンツの中にアイコンを埋め込む場合:

文章中に突然アイコンを挿入すると、Flexboxでは文章の折り返しが崩れます。

• CMS出力のHTML:

エディタで生成されるHTMLは、多くの場合 `` や `` の羅列であり、大規模なリファクタリングが不可能なケースも多々あります。