vertical-alignで縦方向の揃え位置を指定する【CSS】

vertical-alignは行内やセル内において、テキストや画像などの縦方向の揃え位置であるベースラインを指定するプロパティです。

インライン要素もしくはテーブルセルで使用できるプロパティで、ブロックレベル要素では使用できません。

vertical-alignの指定方法

vertical-alignプロパティでは以下のような値を指定することができます。

baseline

指定した要素のベースラインは、親要素のベースラインの位置になります。

baselineは初期値として指定されています。

auto

ベースラインは、ブラウザによって自動的に調整されます。

top

親要素または先頭の行のセルの上端と揃います。

bottom

親要素または先頭の行のセルの下端と揃います。

middle

半角英字の「x」の中央の高さに揃います。

central

行の上端と下端との中央の位置に揃います。

text-top

親要素のフォントと要素の上端が揃います。

text-topはテーブルセルでの指定は無効となります。

text-bottom

親要素のフォントと要素の下端が揃います。

text-bottomはテーブルセルでの指定は無効となります。

use-script

親要素のベースラインを参照し、自動的に調整されます。

sub

親要素の上付き文字の位置になります。

subはテーブルセルでの指定は無効となります。

super

親要素の下付き文字の位置になります。

superはテーブルセルでの指定は無効となります。

単位付き数値や%値での指定

他にもベースラインからの距離を単位付きの数値で指定したり、要素の行の高さに対する割合を%値で指定することができます。

単位付き数値で指定する場合、指定のベースラインを0として、正の値なら上に移動し、負の値なら下に移動します。

単位に関しては、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』の記事を参考にしてみてください。