6

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

在此处输入图像描述

margin: auto实际上，对于大多数使用有问题的浏览器，我设法使这项工作正常div，同时设置overflow: hidden：

在这里提琴

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应该是灵活的，因为它在演示中。随着可用空间的减少，它应该改变大小并挤进去。

4

4 回答 4

11

将居中与浮动隔离

这会影响 IE9/10。

如果浮动元素被移除，或者如果width被使用而不是max-width. 浮动内容的存在，加上使用margin:autoandmax-width而不是width，似乎使 IE9+ 感到困惑。

为了解决这个问题，将居中的内容放在一个包装器 div 中，这样可以将内容的居中与侧边栏的浮动分开。换句话说，在单个 div 中布局方面发生了太多事情，超出了 IE9+ 的处理能力。因此，将#contentdiv 拆分为两个单独的 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;现在必须单独添加到每个元素。

于 2013-04-25T15:59:42.017 回答
3

IE 因没有适当的文档类型而无法工作而臭名昭著。

尝试添加 HTML5 之一

<!DOCTYPE html>
于 2014-07-03T05:16:21.580 回答
1

花车是一项棘手的业务。严格来说，它们只应该影响在它们周围流动的内联内容，所以边距就像浮动不存在一样。

试试这个：

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

这应该使内容框像一个内联元素一样，因此显示在空间的中心。

于 2013-04-25T14:35:47.873 回答
0

据我所知，我总是遇到问题，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%;
}

编辑 如果您想创建灵活的布局，请查看引导程序和流体网格。

于 2013-04-25T14:40:15.373 回答