Home/ Questions/Q 8836271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T09:27:25+00:00

I have a html document structured with a header, content, and footer divs. I

  • 0

I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn’t move along with it. I want it to be place automatically in the center of the window. I am stumped..?

I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.

html:

    <body>
<div id="container">

<div id="header">
    <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/

css:

#header {

    background-color:transparent;
    height:260px;
    width:100%
}


#logo-img{
display: block;
    margin-left: auto;
    margin-right: auto;
}

Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What is happening is that you are already correctly centering your image.

    Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.

    Remove the white area from the image and it will center correctly.

    Edit: in IE, you need to add the rule text-align:center to #header

    Another way:

    If you don’t want to change your image, you can use this hack:

        <style>
    #header {
        overflow-y: hidden;
        background-color: transparent;
        height: 260px;
        width: 100%;
        margin-left: 50%;
    }


    #logo-img{
        display: block;
        position: relative;
        right: 50%;
    }
    </style>
    <body>
    <div id="container">

    <div id="header">
        <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
    </div>
    /*...(body div)
    ...(footer div)*/
    </div> /*container*/

    I learned this hack a while ago here

    • 0