Question

我试图在侧边栏留空的空间中居中。这就是我喜欢它的样子：

enter image description here

在设置margin: auto时，我实际上设法让大多数使用div overflow: hidden的浏览器都能正常工作：{/ 1}}：

CSS

#header {
    height: 50px;
    background: #224444;
    color: #fff;
}

#container div {
    padding: 1em;
}

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
}

#sidebar {
    float: right;
    width: 200px;
    background: #aaa;
    height: 300px;
}

HTML

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content">
       Centered Content
        (Works everywhere but on IE9)
    </div>
</div>

但是，它不适用于IE9。 IE8工作正常，这很奇怪！

我的想法已经不多了，所以我想也许有人知道发生了什么？这个技巧似乎在其他地方都很有效。

注意：请注意，内容div应该像演示中一样灵活。随着可用空间的减少，它应该改变大小并挤进去。

Answer 1

将中心与浮动

隔离

这会影响IE9 / 10。

如果移除了浮动元素，或者使用width而不是max-width，则它可以正常工作。浮动内容的存在，加上使用margin:auto和max-width而不是width，似乎让IE9 +感到困惑。

要解决此问题，请将居中内容放在包装器div中，以便内容的居中可以与侧边栏的浮动分开。换句话说，在单个div中布局方面发生的太多，比IE9 +更能处理。所以将#content div分成两个独立的div。

#header {
    height: 50px;
    padding: 1em;
    background: #224444;
    color: #fff;
}

#content-wrapper {
    overflow: hidden;
}
#content {
    max-width: 400px;
    margin: auto;
    padding: 1em;
    background: #ddd;
    height: 300px;
}

#sidebar {
    float: right;
    width: 200px;
    padding: 1em;
    background: #aaa;
    height: 300px;
}

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content-wrapper">
        <div id="content">
            Centered Content
        </div>
    </div>
</div>

这在IE7 / 8/9/10中测试正常。另外，由于添加了包装div，现在必须将padding: 1em;分别添加到每个元素中。

Answer 2

IE因没有适当的doctypes而无法工作而臭名昭着。

尝试添加HTML5

<!DOCTYPE html>

Answer 3

花车是一件棘手的事。严格地说，它们只应该影响围绕它们流动的内联内容，因此边缘就像浮动一样甚至不存在。

请改为尝试：

#container {text-align:center}
#content {display:inline-block;text-align:left}

这应该使内容框的行为类似于内联元素，因此显示在空间中心。

Answer 4

据我所知，我总是遇到margin:0 auto的问题，因为我没有指定width属性。因此，每当您想要使用margin:auto时，您应该写下这个：

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
    width:500px;
}

或百分比：

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
    width:30%;
}

修改如果您想创建灵活的布局，请查看bootstrap和流体网格。

div没有使用margin：IE9中的auto

4 个答案:

将中心与浮动