Question

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

This is my HR style:

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

When I add float:left; I end up having margin-top: 50px; and margin-bottom: 50px; work correctly but not margin-left: auto; and margin-right: auto; (it just floats to the left all the time).

When I remove float:left; left and right margins work (it’s properly centered) BUT margin-top: 50px; overlaps element above it and there is 0px of margin.

Element above has this style if you need it:

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

I want my HR to be centered and with 50px top and bottom margin.

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