中心Div在另一个(100%宽度)div内

Sha*_*sri 38 css xhtml

这里有一个"简单"的问题,不确定为什么会这么复杂.

  1. 有一个100%(宽度)大小的div.
  2. 将另一个div放在这个div的中间(大小为940px)

有任何想法吗?:)

geo*_*wa4 55

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
Run Code Online (Sandbox Code Playgroud)

  • 如果您关心,子选择器>将无法在IE6中工作. (7认同)
  • text-align:center对内部div的居中没有帮助. (4认同)

Vir*_*aru 30

内部div的以下样式将使其居中.

margin: 0 auto;
Run Code Online (Sandbox Code Playgroud)


Kha*_*yar 20

有关详细信息,让我们说下面的代码将使div对齐中心:

margin-left: auto;
margin-right: auto;
Run Code Online (Sandbox Code Playgroud)

或者只是使用:

margin: 0 auto;
Run Code Online (Sandbox Code Playgroud)

但请记住,只有在html元素上指定固定宽度(不是100%)时,上述CSS代码才有效.所以问题的完整解决方案是:

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}
Run Code Online (Sandbox Code Playgroud)


Lar*_*nal 6

关键是保证金:0自动; 在内部div.概念验证示例:

<!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>
Run Code Online (Sandbox Code Playgroud)

  • 这是一个很好的答案,因为如果您使用margin:0 auto技术,拥有正确的doc类型至关重要 (2认同)

小智 5

.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}
Run Code Online (Sandbox Code Playgroud)

在 Internet Explorer 7 中不起作用……但谁在乎呢?