CSS

vertical-align(メモ)

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>

スクリーンショット 2018-07-07 13.21.46.png

要素の基準となる線がある

 例

style.css
span{
 vertical-align: text-top;
}

とすると

スクリーンショット 2018-07-07 13.25.39.png

hoge(親要素)のtext-topのラインと、huga(対象のインライン要素)のtext-topのラインが一致するようになる