CODEWITHSUNDEEP
htmlimagecss
Alexiz Hernandez
Alexiz Hernandez

Reputation: 359

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

Upvotes: 0

Views: 524

Answers (1)

4g0tt3nSou1
4g0tt3nSou1

Reputation: 89

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

Upvotes: 1

Related Questions