如何在IE7中居中div [英] How can I center div in div in IE7

问题描述

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放在wrapper div中;

I want to center all div in wrapper div like this;

以上代码在IE8，IE9， Chrome，Safari，Opera，FF，但不能在IE7中工作。当我在IE7中打开页面时，页面看起来像这样;

Above codes work fine in IE8,IE9,Chrome,Safari,Opera,FF but not working in IE7. When I open page in IE7, page looks like this;

如果我使用float：left，问题似乎是解决，但所有div基于左边。我如何解决这个问题？

If I use float:left, the problem seems to be solved but all divs based on the left. How can I solve this?

http：// jsfiddle.net/eBxFX/2/

推荐答案

Inline-block在IE7中无效。

Inline-block doesn't work in IE7.

你必须使用缩放：1，并显示：inline作为一个黑客或不从一个不同的css只为ie7。

You have to use zoom:1 and display:inline as a hack or without hack from a different css only for 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/

这篇关于如何在IE7中居中div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！