如何修復保證金自動當浮動左元素參與

Question

擁有的page類，一類container爲DIV盒行，box類樣式的所有的箱子..

的行div-boxes需要在頁面居中..

需要什麼組合width + display + margin（跨瀏覽器）？

這些箱子被浮動離開，這似乎是問題的根源..

當前CSS：

.page { 
    width: 100%; 
} 

.container { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

.box { 
    float: left; 
    margin: %; 
} 

Answer 1

你會想在你的箱子使用display:inline-block，有效地治療他們如文本，然後在容器設置text-align:center

.container { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

.box { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: grey; 
} 

Demo fiddle

Answer 2

我做了一個jsFiddle。它的固定寬度。我的問題是會有多少個.box元素？

如果它的動態，然後使用一些JavaScript制定出 '.box的'

http://jsfiddle.net/james_nicholson/4P9s8/10/

.page { 
    width: 100%; 
    border:1px solid black; 
    height:auto; 
} 

.container { 
    width: 440px; 
    display: block; 
    margin: 0 auto; 
    background:blue; 
    min-height:500px; 
} 

.box { 
    float: left; 
    width: 100px; 
    background: red; 
    margin: 5px; 
    display: block; 
    height: 100px; 

}