ページの真ん中(横/幅)に<div>を配置する方法

幅」を800ピクセルに設定したdivタグがあります。ブラウザの幅が800ピクセルより大きい場合、divを引き伸ばすのではなく、ページの中央に寄せるようにしてください。

ソリューション

    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
解説 (10)

1.中央に配置したいのは、縦か横のどちらかということですか?高さ」を800ピクセルに指定して、「幅」がそれより大きいときにはdivが伸びないようにしたいとのことですが...。

2.水平方向にセンタリングするには、CSSのmargin: auto;属性を使用します。また、bodyhtmlの要素にマージンやパディングがないことを確認する必要があります。

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
解説 (0)

Internet Explorer 6でも正常に動作させるためには、以下のようにする必要があります。

HTML


    <div class="centered">
        centered content
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
解説 (1)