1

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

HR を中央に配置し、上下の余白を 50px にしたい。

4

1 に答える 1

3 
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%;
}
于 2012-07-13T10:30:33.467 に答える