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

適用対象 インライン要素、テーブル内セル要素
継承 しない

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プロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する