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 | 要素の表示倍率（拡大・縮小）を指定する |