How to center a header image - css

Question

I have a problem. The answers to other people questions didn't solve my problem.
It's about image in my header, here's the code:
HTML
<div id="site">
<div id="header">
<img class="center" src="http://i.imgur.com/jfDhpP5.png"/>
</div>
<div id="mainNav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</div>
</div>
CSS
#container{
width: 1000px;
margin: 1em auto;
}
#header{
display: block;
width: 1000px;
margin: 0 auto;
}
body{
background-color: grey;
color: black;
font-family: sans-serif;
}
img.center{
text-align:center;
margin: 0 auto;
padding:0px;
}
I also try this:
div#pictures {
text-align: center;
}
also not working... checked in firefox and IE, the newest versions.... o.O
Please help!

Answer 1

CSS for header
width:100%;
text-align:center;
CSS for your img
display:inline-block;
margin: 0 auto;
See example here
That said, merely having text-align:center; on your header should be find, as in here

Answer 2

To add to SW4's answer, there are various ways to align text with CSS.
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.d {
text-align: justify;
}
For anyone looking for a great, getting started resource, one I'd recommend is W3Schools.

Answer 3

Thanks to SW4's answer I was having a similar problem with a header image. I was using a rectangular image and also trying to make it circular. After fixing the image shape and sizing I then had an issue with getting centered in the .
Here's my code...
HTML:
<div class= "image-cropper">
<img src="#" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
display:inline-block;
margin: 0 auto;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -15%; /*centers the image*/
height: auto;
width: 250px;
}
-- somebody may have a better way of coding it out but after several attempts and messing around with the px and % I finally got mine to look the way I intended.