Alexiz Hernandez Alexiz Hernandez - 3 months ago 10
CSS Question

Center align image inside div horizontally and vertically

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

enter image description here

Answer

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