web-dev-qa-db-ja.com

別の内側（100％幅）divの中央Div

ここではかなり「単純な」問題であり、なぜそれほど複雑なのかはわかりません。

  1. 100％（幅）サイズのdivがあります。
  2. このdivの中央に別のdivを配置します（サイズは940ピクセル）

何か案は？ :)

cssxhtml
38
Shadi Almosri
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
55
geowa4

内側のdivの以下のスタイルは中央に配置されます。

margin: 0 auto;
30
Virat Kadaru

詳細情報については、以下のコードがdivを中央揃えにするとしましょう：

margin-left: auto;
margin-right: auto;

または単に使用します：

margin: 0 auto;

ただし、上記のCSSコードは、html要素で固定幅（100％ではない）を指定した場合にのみ機能します。したがって、問題の完全な解決策は次のようになります。

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}
20
Khashayar

キーは、内部divのmargin：0 auto;です。概念実証の例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
        <div style="background-color: yellow; width: 940px; margin: 0 auto;">
            Test
        </div>
    </div>
</body>
</html>
6
Larsenal
.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Internet Explorer 7では動作しません...しかし、誰が気にしますか？

4
DeFliGra

margin: 0 auto;を内側のdivに追加するだけです。

3
ScottE