Center align image inside div horizontally and vertically

Question

I currently have a header div and inside of it, I have header-top and header-bottom . I am trying to place my logo on the top-header and align it vertically and horizontally. The logo aligns horizontally but vertically, it pushes aligns according to the body it seems and it brings the header down 20px. Here is my code.

HTML:

<body>
    <div id="big-wrapper">
        <div id="header">
            <div id="header-top">
                <img src="img/main-logo.png" />
            </div>
            <div id="header-bottom">
            </div>
        </div>
    </div>
</body>

CSS:

#header {
    width: 100%;
    height: 160px;
    box-shadow: 0 1px 4px 1px rgba(237, 237, 237, 1);
}

#header-top {
    height: 130px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.7);
    background-color: rgba(255, 255, 255, 1);
}

#header-top img {
    height: 90px;
    width: 255px;
    display: block;
    margin: 20px auto;
}

#header-bottom {
    height: 30px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.7);
    background-color: rgba(255, 255, 255, 1);
}

This is what I get

Answer 1

Suggestion. Could be wrong.

    <div id="header-top">
        <center>
            <img src="img/main-logo.png" />
        </center>
    </div>

If wrong, try aligning the div as so.

Edit: If all else fails, edit image, and offset it to desired alignment

Center align image inside div horizontally and vertically

Question

1 answers

solution1
1 ACCPTED 2016-08-09 02:00:55

Center align image inside div horizontally and vertically

Question

1 answers

solution1 1 ACCPTED 2016-08-09 02:00:55

solution1
1 ACCPTED 2016-08-09 02:00:55