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】』の記事を参考にしてみてください。
Leave a Comment