CSSによるボックスの中央寄せ

  • CSS
  • 現在地

前書き

ついこの間から、Google の検索結果画面のレイアウトが変わっていたので、真似してみました。備忘録として方法について記述しておきます。

作り方

  1. まず本文を記述するボックスを用意します。
  2. 次に、CSS でこのボックスの固定したい幅の数値を入力。
  3. 最後に、このボックスの左右の余白を自動に設定して完成です。

具体例

ボックス(div#container)の幅を"800px"として、中央寄せする場合のCSSへの記述。

  • div#container{
  • width: 800px; margin: 0 auto;
  • }

あとは、この固定幅を設定したボックスの中に、本文を記述するだけです。

追記:なお、IEの場合は効かないので、_text-align:center; を #container の親要素に記述してください。

後書き

上記のように、CSSの中央揃え(text-align: center)が効かない <div> などのブロック要素も、固定幅なら中央寄せは問題なくできます。

ということで、次のページでは、可変幅のボックスに制限を設けた場合の中央寄せについて記述しておきます。

スポンサードリンク

inserted by FC2 system