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プロパティ
| 要素の表示や配置方法 | |
|---|---|
| bottom | 位置指定で配置された要素の底辺からの距離を指定する |
| break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
| break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
| break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
| clear | フロート（float）の回り込みを解除する |
| clip | 要素を切り抜いて可視化する範囲を指定する |
| box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
| display | 要素の表示形式を指定する |
| float | 要素を右または左へ寄せて配置する |
| left | 位置指定で配置された要素の左辺からの距離を指定する |
| overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
| overflow-wrap | 長い単語の折り返し方法について指定する |
| overflow-x | 要素からはみ出した内容の水平方向の表示方法を指定する |
| overflow-y | 要素からはみ出した内容の垂直方向の表示方法を指定する |
| position | 要素の配置方法について相対的か絶対的にするかを指定する |
| right | 位置指定で配置された要素の右辺からの距離を指定する |
| vertical-align | ボックス内のインライン要素に縦位置を揃える基準を指定する |
| visibility | 要素の領域を残したまま表示・非表示を指定する |
| z-index | 要素の重なり順序を指定する |