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

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

投稿日：2013年8月5日 | カテゴリー：Webデザイン

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

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

次にスタイルシートです。ここで重要なのは「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要素に背景なども設定したりすれば、楽しいデザインになると思います。

本日は以上です。