vertical-alignプロパティ。

CSSで、縦方向の行揃えを指定するvertical-alignプロパティに関する解説です。

vertical-alignプロパティ・目次。

vertical-alignプロパティとは。

vertical-alignプロパティは、縦方向の行揃えを指定するプロパティです。

vertical-alignプロパティの扱い。

継承の有無
vertical-alignプロパティは、上位要素から継承されません。
対象セレクタ
インライン要素または表(テーブル)のコマ要素(displayプロパティにtable-cell値が与えられた要素)に限られます。
対象メディア
視覚系のメディア全てが対象となります。

vertical-alignプロパティの書式。

vertical-alignプロパティの書式は、以下のようになります。

vertical-align: 値

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
キーワード

以下のキーワードから、必要なものを撰んで指定します。

baseline

親要素のベースラインに自らのベースラインを合わせます。(デフォルト)

  • 当該要素がベースラインを持たない要素の場合は、親要素のベースラインに自らの下辺を合わせます。
middle

親要素のベースラインより"x"の高さの分だけ上の位置に自らの中心を合わせます。

  • しばしば中央を合わせると解説されますが、正式な仕様は上記の通りです。
sub
下付き文字として適切な位置に下げます。
super

上付き文字として適切な位置に上げます。

  • HTMLで同様の効果を出す物理要素は<sup>要素ですが、CSSではvertical-align: super;プロパティとなります。
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プロパティは正常に機能しません。

WAP 2.0での注意事項。

WAP 2.0では、vertical-alignプロパティには以下の値のみが定義されております。

しかしながら、オープンウェーヴ社のWAP 2.0 ウェブブラウザには他のキーワード値も実装されております。

関連項目。

line-height
行の高さ
text-align
行を揃える方向
caption-side
表(テーブル)に付く表題の表示位置の指定

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com