html - 为什么margin top 不适用于图像替换徽标？

Question

我有一个按徽标拆分的导航菜单：

 <div id="header">
    <div id="header-container">

       <div class="left-nav">
          <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Portfolio</a></li>
             <li><a href="#">Awards</a></li>
         </ul>
      </div>

      <div class="logo">
        <h1>Magdi Designs</h1>
      </div>

      <div class="right-nav">
        <ul>
           <li><a href="#">Testimonials</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
     </div>

    </div>
 </div>

CSS

 #header {
    height: 60px;
    margin-top: 30px;
 }

 #header-container {
    width: 80%;
    margin: auto;
    position: relative;
 }

 #header li {
    display: inline;
    line-height: 60px;
 }

 #header .left-nav {
    position: absolute;
    top: 0;
    left: 0;
 }

 #header h1 {
    background: url(logo.png) no-repeat;
    width: 284px;
    height: 30px;
    margin-top: 15px;
    text-align: center;
    margin: auto;
 }

 #header .right-nav {
    position: absolute;
    top: 0;
    right: 0;
 }

<h1>徽标标签似乎没有应用边距顶部。
对不起，如果我放了太多不相关的代码，但我不确定是什么导致了问题。
我也尝试过填充，但仍然不起作用。
jsFiddle 演示

第二个问题：
这是做拆分菜单的好方法吗？

Answer 1

您正在设置margin: auto之后margin-top: 15px删除所需的边距。margin: auto反正也不需要。

Answer 2

尝试：

#header h1 {
    margin: 15px auto 0;
}

代替：

#header h1 {
    margin-top: 15px;
    margin: auto;
}