圍繞浮動內容包裝div，沒有包裝獲得與其父母相同的寬度

Question

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

我設法得到這樣的div，但我最後剩下的問題是當你添加足夠的元素，所以它變成兩行而不是一個。 Nomatter內部容器留出了足夠多的空間，而不是像它的孩子一樣寬。

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具有相同的寬度。

Answer 1

居中包含所有浮動元素股利（我想你所談論的#outer）這一行添加到你的CSS：

#outer { 
    margin: 0 auto; 
} 

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