vertical-align

CSSプロパティ「vertical-align」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

vertical-align

テキストの縦位置を指定するプロパティ。

値により、インライン要素内でのテキストや画像の縦位置を指定することができる。

top テキスト等の上部に揃える。
middle テキスト等の中央に揃える。
bottom テキスト等の下部に揃える。
text-top 親ボックスのテキストの上部に揃える。
text-bottom 親ボックスのテキストの下部に揃える。
super 上付き文字として揃える。
sub 下付き文字として揃える。
baseline 基準値。何も指定していない場合、これが標準となる。
数値で指定 px、pt、em等の単位で指定。ベースラインを基準に数値で指定する。
%で指定 line-heightで指定した値に対する割合を%で指定。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { vertical-align:top; }

[HTMLの記述]

<img alt="" src="hogehoge.gif" class="sampleA" />

[ブラウザ上の表示]

imgタグに値topを指定した場合。

サンプル(B)

[CSSの記述]

.sampleA { vertical-align:middle; }

[HTMLの記述]

<img alt="" src="hogehoge.gif" class="sampleB" />

[ブラウザ上の表示]

imgタグに値middleを指定した場合。