vertical-alignとは
vartical-alignプロパティとは要素の縦方向の配置の基準を指定することができる。
このプロパティはインライン要素にのみ有効
「vertical-alignを指定した要素のどこを、親要素のどこに合わせるか」
一覧
| オプション | 説明 |
|---|---|
| baseline | 親要素のベースラインに揃える |
| middle | 対象の要素と親要素の中央ラインを親要素に揃える |
| text-top | 対象要素と親要素の最上部ラインを親要素の文字の最上部に揃える |
| text-bottom | 対象要素と親要素の最下部ラインを親要素の文字の最下部に揃える |
| top | 対象要素の行の最上ラインを親要素の行の最上部ラインに揃える |
| bottom | 対象要素の行の最下部ラインを親要素の行の最下部ラインに揃える |
| 数値＋単位 | 対象要素のベースラインを、親要素のベースラインから指定ぶんの距離を置いた位置に揃える |
| % | 対象要素のline-heightの高さを100%として、対象要素のベースラインを親要素のベースラインから指定の割合ぶんの距離を置く |
ラインとは
a.html
<div>
hoge
<span>huga</span>
</div>
要素の基準となる線がある
例
style.css
span{
vertical-align: text-top;
}
とすると
hoge(親要素）のtext-topのラインと、huga（対象のインライン要素）のtext-topのラインが一致するようになる