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/

Answer 2

2017年再次访问

#wrapper{
    width:100%;
    display: flex;
    justify-content: space-around;
}
#center{
    background:yellow;
    display: flex;

}
.cell{
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Fidle：http://jsfiddle.net/027m8mnv/

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

2 个答案: