如何在 IE7 的 div 中居中 div答案

【问题标题】：How can I center div in div in IE7如何在 IE7 的 div 中居中 div
【发布时间】：2013-01-05 21:09:45
【问题描述】：

HTML：

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS：

.wrapper{
    width:1000px;
    text-align:center;
    float:left;    
}

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
 }

我想像这样将所有 div 放在包装 div 中；

以上代码在 IE8、IE9、Chrome、Safari、Opera、FF 中运行良好，但在 IE7 中无法运行。当我在 IE7 中打开页面时，页面如下所示；

如果我使用float:left，问题似乎解决了，但所有的div都基于left。我该如何解决这个问题？

http://jsfiddle.net/eBxFX/2/

【问题讨论】：

包装的宽度是恒定的还是可能改变？

标签： html css internet-explorer css-float internet-explorer-7

【解决方案1】：

内联块在 IE7 中不起作用。

您必须使用 zoom:1 和 display:inline 作为 hack 或不使用来自不同 css 的 hack，仅适用于 ie7。

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    *display: inline;
    *zoom:1;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
}

http://jsfiddle.net/eBxFX/4/

【讨论】：