我的人力资源风格不符合预期

Question

JSFIDDLE：http://jsfiddle.net/V7wUv/2/

这是我的人力资源风格：

.page-content hr {
    background-color: #DCDCDC;
    border: 0 none;
    clear: both;
    display: block;
    float: left; <-- take a close look at this
    height: 1px;
    margin: 50px auto; <-- take a close look at this
    max-width: 1120px;
    width: 100%;
}

当我添加float:left;时，我最终使margin-top: 50px;和margin-bottom: 50px;正常工作，但margin-left: auto;和margin-right: auto;却不能正常工作（它总是向左浮动）。

当我移除float:left;时，左边和右边的边距工作（它正确居中），但margin-top: 50px;与它上面的元素重叠，并且有边距的0px。

如果你需要的话，上面的元素有这种风格：

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}

我希望我的人力资源中心和50像素的上下边距。

Answer 1

hr {
    border: 0;
    border-bottom: 1px solid #DCDCDC;
    clear: both;
    display: block;
    height: 0;
    margin: 0 auto 50px auto;
    padding-top: 50px;
    max-width: 220px;
    width: 100%;
}