CSSのvertical-alignプロパティで要素を垂直方向に整列させる方法

CSSを書いていると、ページ上の要素の配置（整列）を調整したい場面に遭遇することがあります。本記事では、要素の垂直方向の配置をコントロールできるCSSプロパティ「vertical-align」と、その各プロパティ値について詳しく解説します。

このプロパティの基本構文は以下のとおりです。

vertical-align: 値;

指定できる値には、baseline、length、sub、super、top、text-top、middle、bottom、text-bottom、initial、inherit の11種類があります。

なお、vertical-alignはインライン要素やテーブルセル（td・th）に対して機能するプロパティであり、ブロックレベル要素単体では期待どおりの効果が得られない点に注意しましょう。

vertical-alignで使えるプロパティ値一覧

baseline（ベースライン）

baselineはデフォルト値です。親要素のベースラインに合わせて要素が配置されます。

length（長さ）

lengthは、pxやem、cmなどの具体的な長さを指定して、要素を上下に移動させます。正の値を指定すると上方向へ、負の値を指定すると下方向へ移動します。同様に、正負のパーセンテージ（%）による指定でも位置を調整できます。

sub（下付き）

subは、親要素の下付き文字（サブスクリプト）のベースラインに要素を揃えます。デフォルト位置より低い位置に配置されます。

super（上付き）

superは、親要素の上付き文字（スーパースクリプト）のベースラインに要素を揃えます。デフォルト位置より高い位置に配置されます。

top（行内の上端）

topは、その行内で最も高い要素の上端に要素を揃えます。

text-top（テキストの上端）

text-topは、親要素のテキストの上端に要素を揃えます。

middle（中央）

middleは、親要素の中央に要素を配置します。

bottom（行内の下端）

bottomは、その行内で最も低い要素の下端に要素を揃えます。

text-bottom（テキストの下端）

text-bottomは、親要素のテキストの下端に要素を揃えます。

initial（初期値）

initialは、プロパティを初期値（デフォルト値）に戻します。

inherit（継承）

inheritは、親要素に設定されたvertical-alignの値を引き継ぎます。

以上が、vertical-alignで使用できるすべてのプロパティ値と、それぞれがもたらす整列効果です。用途に応じて適切な値を選択することで、画像やテキストの縦位置を思いどおりに制御できます。あなたはCSSでどの値をよく使いますか？

まとめ

本記事では、CSSのvertical-alignプロパティを使って、ページ上の要素を垂直方向に整列させる方法を解説しました。各プロパティ値の特徴を理解すれば、インライン要素やテーブルセルの縦位置調整が格段に行いやすくなります。CSSを学び始めたばかりの方は、「CSSとは？カスケーディングスタイルシート入門」や「CSS学習のための初心者ガイド」などの入門記事もあわせて参考にしてください。