ウェブランサー

vertical-align - 縦位置の揃え方を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 インライン要素、テーブル内セル要素
継承 しない

vertical-alignプロパティは、インライン要素とtableのセル要素の縦位置の揃え方を指定出来ます。

揃え方の指定という事で、text-alignプロパティと同じ考えで使用してしまいそうですが、どうやらHTMLで言うところのvalignとは少し扱い方が違うようです。

vertical-alignプロパティはインライン要素に指定して、その後に続く内容物の基準となる位置を決めるために指定する事が正しい使い方のようです。セル要素に指定する場合は、インライン要素ではなくセルに指定し、セルのベースラインを基準として考えます。

vertical-alignに与えられる値

vertical-align: baseline;
ベースラインを揃えます。何も指定しない場合はここが基準になります。
vertical-align: top;
上端揃えにします。
vertical-align: middle;
中央揃えにします。
vertical-align: bottom;
下端揃えにします。
vertical-align: text-top;
テキストの上端に揃えます。※インライン要素のみ
vertical-align: text-bottom;
テキストの下端に揃えます。※インライン要素のみ
vertical-align: super;
上付き文字として揃えます。※インライン要素のみ
vertical-align: sub;
下付き文字として揃えます。※インライン要素のみ
vertical-align: 数値;
ベースラインを基準として、指定した数値分だけ上方向へ、マイナス値をしていした分だけ下方向へ移動します。px、em、exなどの単位で指定出来ます。
vertical-align: 値%;
ベースラインを基準として、指定した数値分だけ上方向へ、マイナス値をしていした分だけ下方向へ移動します。line-heightプロパティによる行ブロックの高さを基準値として参照するパーセンテージが反映されます。

vertical-alignの使用サンプル

CSS
.text_sample01 {
 vertical-align:top;
}
.text_sample02 {
 vertical-align:middle;
}
.text_sample03 {
 vertical-align:bottom;
}
XHTML
<div>
<img src="images/sample_img100-50.png" alt="" class="text_sample01" />
text_sample01 [vertical-align:top;]
</div>

<div>
<img src="images/sample_img100-50.png" alt="" class="text_sample02" />
text_sample02 [vertical-align:middle;]
</div>

<div>
<img src="images/sample_img100-50.png" alt="" class="text_sample03" />
text_sample03 [vertical-align:bottom;]
</div>
表示確認
text_sample01 [vertical-align:top;]
text_sample02 [vertical-align:middle;]
text_sample03 [vertical-align:bottom;]

vertical-alignに関連するCSSプロパティ