vertical-align
垂直方向の表示位置
vertical-align: 値;
行内における垂直方向の揃え方を指定するプロパティです。
vertical-align: top;
プロパティ名 | 値 | 説明 |
---|---|---|
vertical-align | baseline | 指定要素のベースラインと、親要素のベースラインを揃える (初期値) |
top | 指定要素の上端と、行の上端を揃える | |
middle | 指定要素の中心と、親要素のx文字の中心を揃える | |
bottom | 指定要素の下端と、行の下端を揃える | |
text-top | 指定要素の上端と、親要素のフォントの上端を揃える (表のセルでは無効) | |
text-bottom | 指定要素の下端と、親要素のフォントの下端を揃える (表のセルでは無効) | |
super | 上付き文字 (表のセルでは無効) | |
sub | 下付き文字 (表のセルでは無効) | |
長さ、% | 数値+単位(px 等)またはパーセント (正の値は上方向、負の値は下方向に移動) |
- 「text-top」「text-bottom」「super」「sub」の指定は、表のセルでは無効となります。(ベースラインで揃えられてしまいます)
- 「数値+単位」と「%」の指定は、「baseline」が基準の位置となります。
- 「%」の指定は、行の高さ(line-height)に対する割合となります。(SafariとChromeは、他のブラウザとは異なる表示結果になってしまうようです)
.example1 {
vertical-align: middle;
}
.example2 {
vertical-align: -200%;
}