flexとvertical-alignの正しい使い分け！ 文字やアイコンがズレるのはなぜ？

Webサイトを作っていると、文字やアイコンの位置が微妙にズレて「なんで？」と悩むこと、ありませんか。

実はこれ、flexとvertical-alignの得意分野の違いが原因です。

この記事では、それぞれの特徴と使いどころを、具体的なコード例を交えてわかりやすく解説します。読めばもう、文字揃えのストレスから解放されるはずです。

例：同じ文字サイズなのに高さが違う？

Flexbox内の<p>（ブロック要素）

高さは単純に line-height × font-size で決まります。font-sizeが64pxの場合は64px。

インライン要素の<span>

高さは「フォントメトリクス（ascent・descent）」を含めた行ボックス（line box）の大きさで決まります。ベースラインに揃えるため余白が確保され、その結果line-heightよりも大きな値になります。

つまり、ブロック要素はline-height基準、インライン要素はフォントのベースライン基準で高さが計算されるため、差が出るのです。

vertical-alignの基本と使い方

まずは、vertical-alignプロパティについて解説します。

vertical-alignは、主にinline要素（例: <span>や<img>）を親要素*の垂直方向に揃えるために使います。

親要素というのが重要です。異なる高さの要素を揃えようとしても中々揃わない場合、これが原因であることが多いです。

和文・欧文のベースラインの考え方

vertical-alignを理解する上で大切なのが、ベースラインの考え方です。

欧文フォント

欧文フォントは、文字の基準となるベースラインを明確に持っています。そこから、小文字の高さを示すエックスハイト（x-height）、dやhなどの文字が伸びるアセンダーライン（ascender line）、pやqなどの文字が下がる**ディセンダーライン（descender line）**といった、文字の高さが厳密に定義されています。

和文フォント

本語の文字には、欧文のような明確なベースラインはありません。代わりに、文字全体を収める仮想的な正方形の領域、仮想ボディ（em-square）が用いられます。和文の文字はすべてこの仮想ボディ内に収まるように設計されており、vertical-alignはこの仮想ボディの底辺や中央を基準に揃えられます。

vertical-alignは、親要素のline-heightを基準に、和文と欧文それぞれのベースラインを考慮して子要素の位置を調整します。

vertical-alignの各プロパティの意味

• baseline … 親要素のベースラインに子要素のベースラインを合わせます。
• top … 行ボックスの上端に揃える。
• middle … 行ボックスの中央に揃えます。
• bottom … 行ボックスの下端に揃えます。
• sub/super … 添え字のように上下にずらす。

例：テキストとアイコンを揃える

テキストの横に小さなアイコンを並べたいときは、次のように書きます。

<p>テキストと<span class="icon">アイコン</span>を揃える</p>

.icon {
  vertical-align: middle;
}

これで、テキストとアイコンが自然に中央で揃います。

Flexboxの基本と使い方

次に、現代的なレイアウトの主流であるFlexboxについて解説します。

Flexboxは、コンテナ（親要素）の内部にある要素を、柔軟に配置するために使います。 display: flex;を指定した要素は、自動的にflexコンテナとなり、子要素を自由に操作できます。

align-itemsで垂直方向の揃えも簡単

Flexboxの便利なプロパティの一つがalign-itemsです。このプロパティを親要素に指定するだけで、子要素を垂直方向の中央、上、下などに簡単に揃えられます。

• align-items: center … 子要素を中央に揃える
• align-items: flex-start … 上に揃える
• align-items: flex-end … 下に揃える

例：複数のテキストを揃える

複数の要素を一括で中央に揃えたいなら、こんな風に書くだけです。

<div class="container">
  <p>テキスト1</p>
  <p>テキスト2</p>
</div>

.container {
  display: flex;
  align-items: center;
}

これで、バラバラだったテキストがスッキリ中央に整列します。

使い分けの目安

flexとvertical-align、どちらを使えばいいか迷う方もいるかもしれません。迷ったときの判断基準は、「揃えたい要素の数」と「親要素との関係性」です。

• vertical-align … 主に1つの要素（アイコンや画像など）をテキストと同じ行に揃えたいときに最適です。
• Flexbox … 複数の要素をまとめて、かつ柔軟に垂直方向に揃えたいときに最適です。

まとめ

今回は、ウェブで文字やアイコンを美しく揃えるためのflexとvertical-alignの使い分けについて解説しました。

この2つのプロパティを使いこなせば、もう文字揃えで悩むことはありません！ぜひ、ご自身のプロジェクトで試してみてくださいね。応援しています！