CSSによるセンタリングのまとめ

久しぶりにブロックレベル要素をセンタリングしようとして、10分間ほどググる羽目になりました。超初歩的なMY備忘録ですが、CSSで中央揃えをする際の記述をまとめてみました。

インライン要素のセンタリング

これは簡単です。

text-align: center;

を使います。

ブロックレベル要素にこのスタイルをあてると、直下のインライン要素が全て中央揃えで表示されます。

HTMLとCSS

<div style="text-align:center;">真ん中に<br />
寄せて!!</div>

出力結果

ブロックレベル要素のセンタリング

ブロックレベル要素のセンターリングは、text-align:center;ではうまくいきません。

HTMLとCSS

<div style="text-align:center;"><p style="border:2px solid;width:100px;">真ん中に<br />
寄せて!!</p></div>

出力結果

このようにp要素はまったく真ん中に寄りません(P要素の中の文字はセンタリングされています）。

解決策

p要素をセンタリングするには左右のmargin指定をautoにします。

HTMLとCSS

<div style="text-align:center;"><p style="border:2px solid;width:100px;margin:0 auto;">真ん中に<br />
寄せて!!</p></div>

出力結果

ちなみに

text-alighn:center;を削除すると、P要素はセンタリングされたままですが、P要素内の文字のセンタリングは解除されます。

HTMLとCSS

<div><p style="border:2px solid;width:100px;margin:0 auto;">真ん中に<br />
寄せて!!</p></div>

出力結果