如何居中浮动div？

Question

我想将下面的模型中出现的三个div居中(所有都有"float:left").这可能吗？

我不介意有包装div.

文本对齐:居中和显示:内联块不适用于我的代码.

Answer 1

如果你想让它们居中,你就不能漂浮它们.一个更好的选择是将它们全部制作,display: inline-block这样你仍然可以将它们设置为块元素,并且它们仍然会关注你text-align: center的父包装器.对于您提供的有限示例,这似乎是一个很好的解决方案.

为了考虑浏览器兼容性,您需要将其更改为<span>而不是<div>在将其添加display: inline-block到它们之前.这将在IE7及更高版本以及所有其他现代浏览器中得到支持.不支持IE6,但它只在中国广泛使用.

Answer 2

div#wrapper {
    width:960px;
    margin: 0 auto;
}

http://jsfiddle.net/WyxHQ/1/

编辑:

根据建议将完整代码从小提琴移动到答案

<div id="outer-wrapper">
    <div id="wrapper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

HTML

div#outer-wrapper{
border:2px solid black;
    padding:10px;
    width:100%;
}

CSS

div#wrapper{
    width:99px;
    margin:0 auto;
} 

div {
    width:33px;
    height:20px;
}

div.one{
    background:red;
    float:left;
}

div.two{
    background:blue;
        float:left;
}

div.three{
    background:green;
        float:left;
}