vertical-alignプロパティ。
CSSに於ける縦方向の行揃え指定・vertical-alignプロパティに関する解説です。
vertical-alignプロパティとは。
vertical-alignプロパティは、縦方向の行揃え指定です。
具体的には、
- テキストの上に揃えるか
- テキストの下に揃えるか
- 中心に揃えるか
- 上端を合わせるか
- 下端を合わせるか
などと言った指定です。
vertical-alignプロパティの書式。
vertical-alignプロパティの書式は、以下のようになります。
vertical-align: 値値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
- キーワード
- 以下のキーワードから、必要なものを撰んで指定します。
baseline- 親要素のベースラインに自らのベースラインを合わせます。(デフォルト)
- 当該要素がベースラインを持たない要素の場合は、親要素のベースラインに自らの下辺を合わせます。
middle- 親要素のベースラインより"x"の高さの分だけ上の位置に自らの中心を合わせます。
- しばしば
中央を合わせる
と解説されますが、正式な仕様は上記の通りです。
- しばしば
sub- 下付き文字として適切な位置に下げます。
super- 上付き文字として適切な位置に上げます。
- HTMLで同様の効果を出す物理要素は<sup>要素ですが、CSSでは
vertical-align: super;プロパティとなります。
- HTMLで同様の効果を出す物理要素は<sup>要素ですが、CSSでは
text-top- 親要素の文字の上辺に自らの上辺を合わせます。
text-bottom- 親要素の文字の下辺に自らの下辺を合わせます。
top- 自らを含む行の上辺に自らの上辺を合わせます。
bottom- 自らを含む行の下辺に自らの下辺を合わせます。
尚、表(テーブル)のコマ要素(displayプロパティに
table-cell値が与えられた要素)の場合は、以下のように解釈が変わります。baseline- コマのベースラインを、コマが跨ぐ一番上の行のベースラインに合わせます。(デフォルト)
top- コマの上辺を、コマが跨ぐ一番上の行の上辺に合わせます。
bottom- コマの下辺を、コマが跨ぐ一番下の行の下辺に合わせます。
middle- コマの中心を、コマが跨ぐ行の中心に合わせます。
その他の値を指定した場合、ベースラインに合わせるものとします。
- パーセンテージ
- 行の高さ(line-heightプロパティで定まる)を100％とした比率分上に上げます。負値の場合は下に下げ、零の場合はデフォルト通りベースライン合わせとなります。
- 数値
- 数値分上に上げます。負値の場合は下に下げ、零の場合はデフォルト通りベースライン合わせとなります。
vertical-alignプロパティの記述例。
例えば、HTMLの<img>要素において、画像の下辺を行の下辺に揃えたい場合は、
img {vertical-align: bottom;}
と記述します。
vertical-alignプロパティに関する注意事項。
vertical-alignプロパティの仕様上の注意。
表(テーブル)の表題へのvertical-alignプロパティ。
CSS第二水準(CSS 2)では、caption-sideプロパティの仕様において、vertical-alignプロパティの併用を示唆しておりました。
caption-sideプロパティを用いる事で、表(テーブル)の表題を当該表(テーブル)の横に配置する事が認められておりました。
この場合、内容テキストを表(テーブル)に対して上下方向にどう揃えるかと言う問題があり、そのためにvertical-alignプロパティを併用する事とされておりました。
しかしながら、表(テーブル)の表題はdisplayプロパティにtable-caption値が与えられた要素であり、vertical-alignプロパティを適用出来る要素ではありません。
このような矛盾があったためか、CSS第二水準第一改訂版(CSS 2.1)ではcaption-sideプロパティから横方向への配置を指定するプロパティ値が削除されました。
vertical-alignプロパティの実装上の注意。
パーセンテージや数値の実装は、余り正確とは言えないようです。
特にファイアーフォックスの2.0までは、vertical-alignプロパティは正常に機能しません。
- 3.0のβ版で修正されました。