CSSのvertical-align完全解説｜使い方と上下中央揃えの正しい方法

はじめに

CSSで文字や画像の上下位置を調整したい場面は、Web制作の現場において非常に多く発生します。

その際に利用される代表的なプロパティが「vertical-align」です。しかし、vertical-alignには明確な適用条件があり、すべての要素に対して万能に機能するわけではありません。

本記事では、vertical-alignの基本概念から具体的な使い方、効かない理由、さらにflexboxなど代替手法との違いまで体系的に解説します。仕様を正しく理解し、レイアウト調整で迷わないための基礎を身につけましょう。

vertical-alignとは何か

vertical-alignの基本概念

vertical-alignは、インライン要素やテーブルセル内の要素に対して「垂直方向の揃え位置」を指定するCSSプロパティです。 ここで重要なのは、親要素に対して上下中央に配置するための万能プロパティではないという点です。

vertical-alignは、要素の”基準線（baseline）“を基準にして配置を調整します。特にインライン要素では、テキストのベースラインを基準として上下位置が決まります。 そのため、単純に「上下中央揃え」と理解してしまうと、挙動に違和感を覚えることがあります。

主な指定値には以下があります。

• baseline（初期値）
• middle
• top
• bottom
• text-top
• text-bottom
• super / sub

仕様を理解せずに使用すると、意図しないズレが生じる原因になります。

適用できる要素の種類

vertical-alignが適用されるのは、主に次の要素です。

• inline要素
• inline-block要素
• table-cell要素

一方で、block要素には原則として効果がありません。この点が「効かない」と感じる最大の要因です。

例えば、div要素にvertical-align: middle;を指定しても、displayがblockのままであれば上下中央揃えにはなりません。vertical-alignを使用する際は、要素のdisplayプロパティを必ず確認することが重要です。

vertical-alignの使い方

vertical-align: middle;の意味

.item {
  vertical-align: middle;
}

vertical-align: middle;は「親要素の中央に配置する」という意味ではありません。正確には「要素の中央を、親要素のベースライン＋heightの中央に揃える」という仕様です。

baseline・top・bottomの違い

よく使われる各値の基本的な挙動は次の通りです。

• baseline → テキストの基準線に揃える
• top → 行ボックスの上端に揃える
• bottom → 行ボックスの下端に揃える

baselineは初期値ですが、画像をテキストと並べた場合、わずかな余白が発生することがあります。これは画像がベースライン基準で配置されるためです。

デザイン上のズレが気になる場合は、vertical-align: middle;やtop;を試すことで改善するケースがあります。

数値指定やパーセント指定の挙動

vertical-alignでは、数値（pxやem）やパーセント指定も可能です。

span {
  vertical-align: 5px;
}

この場合、ベースラインからの相対的な移動量を指定します。正確な微調整が可能ですが、可読性や保守性が下がるため、実務では多用しない傾向があります。

また、パーセント指定は行の高さに基づいて計算されるため、意図を正確に把握していないと予期しないレイアウトになる可能性があります。

vertical-alignが効かない理由

ブロック要素に効かない理由

vertical-alignが効かないと感じる最も一般的な理由は、対象要素がブロック要素にあっている場合です。

div {
  vertical-align: middle; /* 効かない */
}

この指定は機能しません。なぜなら、ブロック要素は行内の配置概念を持たないためです。

ブロック要素に対し、上下中央揃えを実現したい場合は、flexboxやgridを使用するほうが適切です。

inline-blockとの関係

vertical-alignはinline-block要素には適用可能です。

.box {
  display: inline-block;
  vertical-align: middle;
}

この場合、隣接するinlineまたはinline-block要素との間で垂直位置を調整できます。ただし、親要素全体の中央配置とは異なる概念である点を理解しておく必要があります。

文字や画像の上下中央揃えを実現する方法

テーブルセルでの中央揃え

display: table-cell;を使用すれば、vertical-align: middle;による上下中央揃えが可能です。

.container {
  display: table-cell;
  vertical-align: middle;
}

テーブルレイアウトの特性を利用する方法ですが、モダンな設計では後述のflexboxが主流です。

flexboxを使った中央揃え

現代のレイアウト設計で最も一般的な方法はflexboxです。

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

align-items: center;により、要素を縦方向に中央揃えできます。vertical-alignとは仕組みが異なり、ブロック要素にも適用可能です。

line-heightを使う方法

単一行テキストに限り、line-heightを高さと同じ値にする方法もあります。

.button {
  height: 40px;
  line-height: 40px;
}

ただし、複数行には対応できないため、限定的な手法です。

vertical-alignのよくある質問

vertical-alignとtext-alignの違い

vertical-alignは垂直方向、text-alignは水平方向の揃えを指します。

• vertical-align → 上下方向
• text-align → 左右方向

両者を混同してしまうケースがありますが、制御する軸が異なります。両方を正しく理解することで、意図したレイアウトを実現できます。

実務での使い分けの考え方

実務での使い分けは次の通りです。

• インライン要素の微調整 → vertical-align
• レイアウト全体の中央揃え → flexbox
• 単一行テキスト → line-height

仕様を理解した上で適切な方法を選択することが、効率的なコーディングにつながります。

まとめ

vertical-alignは、インライン要素やテーブルセル内の垂直位置を調整するためのCSSプロパティです。 しかし、ブロック要素には適用できないという仕様を理解していないと、「効かない」という誤解を招きます。

vertical-align: middle;の正確な意味や基準線の概念を把握することで、不要な試行錯誤を減らすことができます。 また、現代のWeb制作ではflexboxを中心としたレイアウト設計が主流です。状況に応じて最適な手法を選択することが重要です。

より実践的なWeb制作スキルやCSS設計の考え方を体系的に学びたい方には、WEBMASTERSのプログラミングスクールがおすすめです。実務視点で整理されたカリキュラムで、現場で通用するスキルを習得できます。

正しい仕様理解こそが、安定したレイアウト実装への第一歩です。