株式会社スゴヨク グーグルパートナーバッジ

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

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

SUGOYOKU BLOG

【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を指定したのに効かない…!というときは、ブロック要素ではないかということをまずは確認してみましょう。

→「displayプロパティのblock・inline・inline-blockの違いと使い分け」についてはこちらから


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プロパティの特徴と使い方についてに困っている方、勉強中の方の参考になれば幸いです。

HP無料診断

毎月3社様限定SEO対策無料診断

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

マーケティング手法22選

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

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


補助金 お問い合わせ

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

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

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得