使用CSS将整个页面居中

Ron*_*nie 0 html css

我试图仅使用CSS来整理我的整个页面,这比我最初预期的要复杂得多.目前我的代码在IE中运行,但在Firefox中没有进行更改.该页面可以在这里看到.以下是涉及的代码部分:

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}
Run Code Online (Sandbox Code Playgroud)

我的HTML结构是:

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>
Run Code Online (Sandbox Code Playgroud)

似乎在Firefox中,包装div之后的所有内容都是在它之外创建的.如果我向wrap div添加'float:left'但是显然所有东西都浮动而不是居中,这就解决了这个问题.

任何帮助将不胜感激.

Joh*_*han 5

将您的标记更改为

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>
Run Code Online (Sandbox Code Playgroud)

编辑:看看链接,你已经做到了.你要添加overflow:auto; #wrap或在包装div上的结束标记之前的末尾添加一个清除div.

此外,在您的示例页面上,wrap div缺少其结束标记.