html - 两个div水平居中

Question

我有两个需要水平居中的，包裹在一个 div 中。你能解释一下我做错了什么吗？

我的 HTML

    <div id="center">
    <div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
    <nav>
        <ul>
            <li>SHOP</li>
            <li>ARTIST</li>
            <li>SERVICES</li>
            <li>FAQs</li>
            <li>CONTACT</li>
        </ul>    
    </nav>
    </div>

我的CSS:

header{
   height:500px;
   width:auto;
   background-image:url(images/headerphoto.png);
   text-align:center;
}

#center{
   width:960px;
   margin:auto;
   overflow:hidden;
   display:inline-block;
}

#logo{
   float:left;
   display:inline-block;
}

nav{
   float:right;
   display:inline-block;
}

Answer 1

#center {
  text-align:center;
}
#logo, nav {
  display: inline-block;
}

The above code works for me http://www.cssdesk.com/QKNNj .