HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – div不会使用margin:auto在IE9中居中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在侧边栏留空的空间中居中.这就是我喜欢它的样子:

我实际上设法使这个工作对大多数浏览器使用margin:auto为div有问题,同时设置overflow:hidden:

Fiddle here

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应该像演示中一样灵活.随着可用空间的减少,它应该改变尺寸并挤入.

解决方法

将中心与浮动隔离

这会影响IE9 / 10.

如果移除浮动元素,或者使用宽度而不是max-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,所以填充:1em;现在必须单独添加到每个元素.

大佬总结

以上是大佬教程为你收集整理的html – div不会使用margin:auto在IE9中居中全部内容,希望文章能够帮你解决html – div不会使用margin:auto在IE9中居中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。