HTML5 / CSS - 将Div中的一个部分居中

Question

我试图将我的部分集中在“内容”中。 div但似乎无法找到一种方法。 我也想知道为什么＆＃39;内容＆＃39;即使div中有元素，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;以使他们成为中心位置。

见这个
的 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