HTML5/CSS - 居中區域內的一個部分

Question

我試圖在「內容」div中居中我的部分，但似乎無法找到這樣做的方法。 我也想知道爲什麼'content'div沒有高度，即使它們中有元素。 基本上我想要三列欄框在中心。 任何幫助將不勝感激，謝謝。

http://jsfiddle.net/VE72c/

body { 
    margin:0px; 
    padding:0px; 
} 

#container { 
    background-color:Silver; 
    width:1024px; 
    margin:auto; 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:20px; 
    min-height:100%; 
    position:absolute; 
    left:0; 
    right:0; 
} 

#content { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#664E44; 
    background-color:red; 
} 

section { 
    color:#24292E; 
    width:300px; 
    height:500px; 
    float:left; 
    margin-right:10px; 
    margin-bottom:10px; 
    background-color:#A8B1B1; 
    padding:4px; 
} 

Answer 1

您可以在部分使用display:inline-block，讓他們擴大家長的高度（#content）的使用text-align:center;到horizo​​ntaly中心他們。

看到這個
FIDDLE

CSS：

body { 
    margin:0px; 
    padding:0px; 
} 
#container { 
    background-color:Silver; 
    width:1024px; 
    margin:auto; 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:20px; 
    min-height:100%; 
    position:absolute; 
    left:0; 
    right:0; 
} 
#content { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#664E44; 
    background-color:red; 
    text-align:center; 

} 
section { 
    color:#24292E; 
    width:300px; 
    height:500px; 
    margin-bottom:10px; 
    margin-right:10px; 
    background-color:#A8B1B1; 
    padding:4px; 
    display:inline-block; 
} 

Answer 2

添加這些，並從部分CSS刪除float: left。

#content { 
    overflow: auto; 
    text-align: center; 
    margin: 0 auto; 
} 

section { 
    display: inline-block; 
} 

JSFIDDLE DEMO