如何將固定大小的多個浮動div居中

Question

我希望子div始終位於其容器內居中，即使在調整大小的情況下也不會改變它們的大小。

問題實施例：http://jsfiddle.net/bQMj7/

HTML

<div id='foo'><div id="container" class='group'> 
    <div class='childs'>one</div> 
    <div class='childs'>two</div> 
    <div class='childs'>three</div> 
    <div class='childs'>four</div> 
    <div class='childs'>five</div> 
    </div> 
</div> 

CSS

#foo { 
     text-align:center; 
    } 

#container { 
    background-color:beige; 
    display:inline-block; 
} 

.childs { 
    width:50px; 
    height:50px; 
    background-color:blue; 
    float:left; 
    margin-right:10px; 
} 

.group:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

我用 「內聯塊/文本對齊：中心」 技術居中孩子的div在其主要容器。當你調整窗口大小時，浮動的div divs會崩潰，這就是我想要的，但是當它們崩潰時，它們不再在它們的容器中居中。

我希望這些摺疊調整大小的div的雲始終居中。

你有什麼想法嗎？

編輯：感謝您的回覆，這幾乎是我正在尋找的！但我擔心的是：

• 爲什麼我用浮離開，而不是inline-block的原因是，我想這些孩子的div有彼此之間沒有空間（他們必須爲行元素，除非我惹將我的代碼縮進到同一行代碼上有那麼多孩子）

• 我想摺疊的最後一行與其他行一樣左對齊，但整個居中。

下面是有關上述兩個問題的更新：http://jsfiddle.net/bQMj7/6/。

Answer 1

你可以使用inline-block所有這些和假的float : center ;這並不存在。

#container{ 
    background-color:beige; 
    display:inline-block; 

} 
#foo{ 
    text-align:center; 

} 

.childs { 
    width:50px; 
    height:50px; 
    background-color:blue; 
    display:inline-block; 
    margin:5px; 
} 

DEMO http://jsfiddle.net/bQMj7/1/

Answer 2

這是你在找什麼：

http://jsfiddle.net/collabcoders/bQMj7/3/

#container{ 
    background-color:beige; 
    display:inline-block; 
} 
#foo{ 
    text-align:center; 
} 
.childs { 
    width:50px; 
    height:50px; 
    background-color:blue; 
    display:inline-block; 
    margin-right:10px; 
} 
.group:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

編輯：如果我正確理解你想要的了塊之間的空間但仍然保持中心。 inline-block的在右邊某種原因放4PX空間，所以只需添加margin-right: -4px;修復：

這裏的新FIDDLE：http://jsfiddle.net/collabcoders/bQMj7/10/

和更新到.child類

.childs { 
    width:50px; 
    height:50px; 
    background-color:blue; 
    display:inline-block; 
    margin-right: -4px; 
}