vertical-align

Updated / Published

vertical-alignプロパティは行内のインラインボックスを形成する要素、及び表のセル要素が生成するボックスの垂直方向の位置揃えを指定します。テキストと画像の並びを配置するのに特に有用です。

初期値
baseline
適用対象
継承
しない
メディア
visual

vertical-alignプロパティの値

vertical-alignプロパティの値には "em", "px" などの単位識別子を伴う数値の長さによる指定と当該要素自身の line-heightプロパティによる行ボックスの高さを基準値として参照するパーセンテージ(%)による割合のパーセンテージ値指定の他にも以下のキーワードを指定することができます。ただし、キーワードの指定は適用対象がインラインボックスを形成する要素と表のセル要素との場合とでそれぞれ意味が異なります。

インラインボックスを形成する要素に指定した場合

baseline
当該要素のベースラインを親要素のベースラインに揃える
top
当該要素の上辺を行中の最も高い要素(画像など)の上辺に揃える
bottom
当該要素の下辺を行中の最も低い要素(画像など)の下辺に揃える
middle
当該要素のベースラインから親要素のフォントサイズの小文字「x」の高さの半分だけ上に揃える
super
当該要素のベースラインを親要素の上付き文字の位置まで上げる(sup要素に類似)
sub
当該要素のベースラインを親要素の下付き文字の位置まで下げる(sub要素に類似)
text-top
当該要素の上辺を親要素のフォントの上辺に揃える
text-bottom
当該要素の下辺を親要素のフォントの下辺に揃える

行の高さは line-heightプロパティによる指定だけでなく、行内に入力されるソースによって内容が置き換えられる置換インライン要素を含む場合は、置換インライン要素に指定されている heightプロパティの値、または内在寸法の高さが行の高さとして適用されます。次の図は、テキストのみを内容とするインラインボックスを形成する要素に指定した場合の並びを示したものです。

vertical-alignプロパティのインラインボックスを形成する要素に対するキーワード配置図

また、インラインボックスを形成する要素における長さとパーセンテージ値の指定には、負の値を指定することもできます。それぞれ「0」,「0%」が、"baseline" と等価であり、正の値は指定された分だけベースラインから当該要素を上げます。これに対して負の値は指定された分だけベースラインから当該要素を下げます。

表のセル要素に指定した場合

baseline
セル要素のベースラインを、最初の行のベースラインに揃える
top
セル要素の上線を、最初の行の上線に揃える
middle
セル要素の中心線を、最初の行の中心線に揃える
bottom
セル要素の上線を、最初の行の上線に揃える
super
セル要素に対して、この値は適用されず、初期値の "baseline" の扱いとなる
sub
セル要素に対して、この値は適用されず、初期値の "baseline" の扱いとなる
text-top
セル要素に対して、この値は適用されず、初期値の "baseline" の扱いとなる
text-bottom
セル要素に対して、この値は適用されず、初期値の "baseline" の扱いとなる

セルの高さは line-heightプロパティによる行の高さとは違い、表要素やセル要素に指定された heightプロパティの値から与えられます。

vertical-alignプロパティの表のセル要素に対するキーワード配置図

vertical-alignプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

img.baseline { vertical-align : baseline ; }
img.middle    { vertical-align : middle ; }
img.top         { vertical-align : top ; }
span.sup       { vertical-align : super ; }
span.sub       { vertical-align : sub ; }