Cannot get logo to center

Question

For the life of me I cannot get why this logo is not centering. Please help!

<div id="header" style="width:100%;" >
<a href="index.html"><img id="logo" src="images/logo384x80.png"/></a></div>

and the CSS

#header {
background-color:#222222;
height:50px;
margin-left:auto;
margin-right:auto;

}

Answer 1

You can try using text-align: center style on the div. I prefer using classes and use classes in CSS to add styles to elements. So I will do something like this, adding a class to div something like: "logo" and set following CSS:

.logo { background-color:#222222; height:50px; margin:auto; text-align: center; }

or for your case:

#header { background-color:#222222; height:50px; margin: auto text-align: center; }

Answer 2

It works if you give the width as a "value" rather than a percentage of a non existing object, i.e. there is nothing surrounding the so its width of 100% means nothing.

Change it to lets say, 20em, and you will see the difference:

<div id="header" >
<a href="index.html"><img id="logo" src="http://www.beyondsecurity.com/assets/img/beyond-security-logo.png"/></a></div>

#header {
background-color:#222222;
width: 20em;
height: 50px;
margin-left:auto;
margin-right:auto;
}