• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

vertical-alignを比較してみた

投稿者アイコン
2020/05/12
書いた人:
futappa_staff
カテゴリ:
CSS
タグ
 
1,058 views

vertical-alignについて、まとめました。なぜか効かなくて困っている方、違いがわからない方は ご覧ください!

vertical-alignを比較してみた

目次

はじめに

vertical-alignを使っていますか?垂直方向の位置を揃えたりと 便利なプロパティですが、色々な値を持っているので それらを比較しようと思います!

比較方法

pタグ(ブロック要素)の中にspanで囲った文字(インライン要素)と、画像(インライン要素)を入れています。それらがどのように配置されるかをみてみましょう。

vertical_align_sample

※pタグの行間はline-height: 1.5;です。
※vertical-alignはブロック要素には効きません。
インライン要素と、テーブルセルのどちらかでないと効きませんのでお気をつけください。

vertical-alignを比較してみた

baseline(初期値)

親要素のベースラインに揃えます。何も指定がなければ、これがデフォルトになっています。

うえおfutappa_ruri

top

行の高さの上端に揃えます。

うえおfutappa_ruri

middle

行の高さの中央に揃えます。

うえおfutappa_ruri

bottom

行の高さの下端に揃えます。

うえおfutappa_ruri

text-top

親要素のテキストの上端に揃えます。

うえおfutappa_ruri

text-bottom

親要素のテキストの下端に揃えます。

うえおfutappa_ruri

数値(20px)

親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

うえおfutappa_ruri

数値(-40%)

先ほどと同じように、親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

うえおfutappa_ruri

super

親要素を基準に、上付き文字の位置になります。

うえおfutappa_ruri

sub

親要素を基準に、下付き文字の位置になります。

うえおfutappa_ruri

まとめ

いかがでしたか?
なんとなくで使っていた方も多い?と思いますが、少しでも理解が深まり、気づきがあれば幸いです♪

参考サイト


この記事を読んだ人はこんな記事も読んでいます