html - HTML/CSS:如何居中 float div？

我有这个HTML：

<div id="container">
    <div id="boxContainer">
        <div id="box1">
            <span>Text1</span>
        </div>
        <div id="box2">
            <span>Text2</span>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

以及以下CSS：

#container {
    width:100%;
    background-color:yellow;
}

#boxContainer {
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

我希望#boxContainer的宽度与#box1和#box2的宽度之和相匹配，但它是100%，因此它不在#container的中心。为什么？
我有一把小提琴显示问题：http://jsfiddle.net/dennismadsen/dxbfpbg1/

最佳答案

未浮动的块级元素（如#boxContainerdiv）将默认为100%宽度。您可以将其更改为display: inline-block以仅占用所需的空间。然后可以在其父元素上以text-align: center居中。

#container {
    text-align: center;
    width:100%;
    background-color:yellow
}

#boxContainer {
    display: inline-block;
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

更新小提琴：http://jsfiddle.net/dxbfpbg1/2/