【CSS基礎】vertical-alignプロパティの特徴と使い方

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

CSSの基礎的な知識として、vertical-alignプロパティの特徴と使い方について解説します。

文字の右寄せ・中央寄せではtext-alignをよく使うけれど、縦向き（上下方向）も中央ぞろえにしたい！と思ったことはありませんか？そんなときにはvertical-alignを活用してみましょう。

vertical-alignとは？

そもそも

「vertical」は垂直方向、「align」は整列するという意味を持ちます。

CSSのvertical-alignプロパティは、inline/inline-block/table-cellの要素に対して垂直方向（上下・縦向き）の位置を指定することができます。ここで大切なのはdissplay:block;の要素に対しては指定することができないという点です。

vertical-alignを指定したのに効かない…！というときは、ブロック要素ではないかということをまずは確認してみましょう。

vertical-alignの指定でできること

初期値【vertical-align: baseline;】

vertical-alignプロパティの初期値は「baseline」となっています。これは、この要素のベースラインを親要素のベースラインにそろえるというものです。

vertical-alignに指定できる値

vertical-alignに指定できる値と、その内容は以下の通りです。

・top：同じ行のボックス内で上端にそろえる
・middle：親要素の小文字のxの半分に要素の中央をそろえる
・bottom：同じ行のボックス内で下端にそろえる
・text-top：親要素のフォントの上端にそろえる
・text-bottom：親要素のフォントの下端にそろえる
・パーセント（%）：その要素のline-heightプロパティの値に対する割合を％で指定する
・数値＋単位：ベースラインをそろえた状態を0として、正の値なら上方向、負の値なら下方向に指定する

なお、「text-top」と「text-bottom」はtable-cellの要素に対しては無効です。

おわりに

文字や画像などの要素を縦向きにそろえたい！という方はぜひvertical-alignプロパティを活用してみてください。

vertical-alignプロパティの特徴と使い方についてに困っている方、勉強中の方の参考になれば幸いです。