我的HR风格不像预期的那样工作

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%;
}

我希望我的人力资源能够居中，并且有50px的上下边距。

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%;
}