html - ラッパーがそれ自身の親と同じ幅になることなく、フローティングコンテンツの周りに div をラップする

Question

私の問題は、別の div 内のすべての浮動要素を含む div を中央に配置できるようにする必要があることです。これは動的である必要があります。

私はなんとかそのような div を取得しましたが、最後に残った問題は、十分な要素を追加して、1 行ではなく 2 行になるようにすることです。どれだけのスペースが残っていても、内側のコンテナーはその子と同じ幅ではなく、全幅に広がります。

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 を子と同じ幅にする必要があるので、外側の中央に配置できます。現在、それをラップしている外側の div と同じ幅です。