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%;
}
