在100%屏幕中居中对齐可变宽度div

Question

我有这个HTML

<div id="wrapper">
<div id="center">

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>

</div>
</div>

和CSS

#wrapper{width:100%}
.cell{float:left}

因此包装器的宽度为100%,单元格的宽度和数量是可变的,这意味着#center的宽度也是可变的.

问题:如何保持#center水平居中对齐？

Answer 1

是的,你可以做到display:inline-block.

例如:

CSS:

 #wrapper{
    width:100%;
    text-align:center;
}
#center{
    display:inline-block;
    *display:inline;/* IE*/
    *zoom:1;/* IE*/
    background:yellow;
    overflow:hidden;
    text-align:left;
}
.cell{
    float:left;
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

查看此示例http://jsfiddle.net/8a4NK/