[CSS]ボックスを中央揃えにする方法

画像や文字列を中央揃えにする方法としては、HTMLでCENTERタグを使えば中央揃えになりますが、今回はスタイルシートを使って背景に画像があるボックスを中央揃えにしてみたいと思います。

HTMLはシンプルにこれだけ

<div id="box">
    <div>ボックス内に表示する文字列</div>
</div>

中央揃えで重要なのはmargin

次にスタイルシートです。ここで重要なのは「margin：0 auto」です。この指定によってボックスを中央に表示することができます。

/* id=boxのスタイルの定義 */
div#box {
    width: 100%;
}

/* idがboxの中にあるdiv要素に関するスタイルの定義 */
#box div {
    width: 200px;
    margin: 0 auto;
}

これで200pxのボックスを全体の中央に揃えることができます。

「margin: 0 auto」と指定すると、ボックスの左右のマージンを自動的に半分に調整してくれるため、その結果として中央にボックスが表示されることになります。

background-imageを使ってdiv要素に背景なども設定したりすれば、楽しいデザインになると思います。

本日は以上です。