はじめに

福岡のホームページ制作・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プロパティの特徴と使い方についてに困っている方、勉強中の方の参考になれば幸いです。

【実践マーケティング手法２２選】 無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。