vertical-alignを比較してみた
2020/05/12
- 書いた人：
- futappa_staff
- カテゴリ：
- CSS
- 5,131 views
：vertical-alignについて、まとめました。なぜか効かなくて困っている方、違いがわからない方は ご覧ください！
目次
はじめに
vertical-alignを使っていますか？垂直方向の位置を揃えたりと 便利なプロパティですが、色々な値を持っているので それらを比較しようと思います！
比較方法
pタグ（ブロック要素）の中にspanで囲った文字（インライン要素）と、画像（インライン要素）を入れています。それらがどのように配置されるかをみてみましょう。
※pタグの行間はline-height: 1.5;です。
※vertical-alignはブロック要素には効きません。
インライン要素と、テーブルセルのどちらかでないと効きませんのでお気をつけください。
vertical-alignを比較してみた
baseline（初期値）
親要素のベースラインに揃えます。何も指定がなければ、これがデフォルトになっています。
あいうえお
top
行の高さの上端に揃えます。
あいうえお
middle
行の高さの中央に揃えます。
あいうえお
bottom
行の高さの下端に揃えます。
あいうえお
text-top
親要素のテキストの上端に揃えます。
あいうえお
text-bottom
親要素のテキストの下端に揃えます。
あいうえお
数値（20px）
親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。
あいうえお
数値（-40%）
先ほどと同じように、親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。
あいうえお
super
親要素を基準に、上付き文字の位置になります。
あいうえお
sub
親要素を基準に、下付き文字の位置になります。
あいうえお
まとめ
いかがでしたか？
なんとなくで使っていた方も多い？と思いますが、少しでも理解が深まり、気づきがあれば幸いです♪
参考サイト