在浮動內容周圍包裝div，而包裝器的寬度與自己的父容器相同

Question

我的問題是我需要能夠將包含所有浮動元素的div居中放置在另一個div中。 這需要動態。

我設法獲得了這樣的div，但是我剩下的最后一個問題是，當您添加足夠的元素時，它變為兩行而不是一列。 無論如何，內部容器還剩下多少空間就可以展開整個寬度，而不僅僅是其子容器的寬度。

http://jsfiddle.net/qsAUk/16/

<div id="outer">
    <div id="inner">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

#outer
{
    background-color: blue;
    text-align: center;
}

#inner
{
    display: inline-block;
    overflow: hidden;
    background-color: red;
}

.box
{
    background-color: black;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    float: left;
}

很快說明了我的問題。

我有一定寬度的外部div。

我的內層夾芯的寬度應與孩子的寬度相同，這樣我就可以在外層內居中。 現在，它的寬度與包裹它的外部div相同。

Answer 1

使包含所有浮動元素的div居中（我認為您在談論#outer），請將此行添加到CSS中：

#outer {
    margin: 0 auto;
}

這是您的小提琴更新： http : //jsfiddle.net/qsAUk/6/