如何将标题图像居中

我有个问题。其他人问题的答案并没有解决我的问题。

这是关于我的标题中的图像，代码如下：

HTML

<div id="site">

    <div id="header">
        <img class="center" src="http://i.imgur.com/jfDhpP5.png"/>    
    </div>

    <div id="mainNav">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></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;
}

我也尝试这个：

div#pictures {
  text-align: center;
}

也不起作用...检查了 firefox 和 IE，最新版本...o.O

请帮忙！

CSS for header

width:100%;
text-align:center;

CSS 为您img

display:inline-block;
margin: 0 auto;

请参阅此处的示例 http://jsfiddle.net/2hB9Z/

也就是说，仅仅有text-align:center;在你的header应该可以找到，就像这里一样 http://jsfiddle.net/UYjG6/