为什么我不能将导航菜单置于中心位置？

Question

我的测试网站在这里工作正常我相信（还没有在所有浏览器中测试它，但我顶部的主导航菜单不会居中。中间有一个间隙，因为徽标会在那里，但是我不希望它在这个测试的方式。

为什么我的导航不在中心？

CSS

    #main-navigation { width: 100%; height: 70px;font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; font-size: 1em; letter-spacing: 2px; line-height: 35px; margin: 0 auto;}
    #main-navigation ul { width: 289px; list-style: none; }
    #main-navigation li { float: left ;margin-left: 12px; }
    #main-navigation li a { display: block; text-decoration: none; color: #fff; }
    #main-navigation li a:hover { color: #c7bd89; }
    #main-nav-left{ list-style: none; float: left; border: 1px solid #6F0; }
    #main-nav-right{ list-style: none; float:right; border: 1px solid #6F0; }

header { width: 960px; margin: 0 auto; display: inline-block; /*border: 1px solid #000;*/}

HTML

<header>
  <nav id="main-navigation">
           <ul id="main-nav-left">
               <li class="current"><a href="#">Home</a></li>
                <li><a href="#">Areas of Practice</a></li>
           </ul>
          <!-- <a href="http://averylawoffice.ca/"><img class="averylogo" src="img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office"></a>-->
           <img class="banner" src="img/BANNER1-averylawoffice.jpg" alt="Banner 1">

           <ul id="main-nav-right">
               <li class="current"><a href="#">Contact</a></li>
               <li><a href="#">Blog</a></li>
           </ul>

        </nav>

</header>

如你所见，我已经有了“margin：0 auto;”在那里。所以我很困惑为什么它不起作用。

This is the site

但是如果我拿出display：inline-block;它工作正常，但在我的本地wordpress主题更新后，它移动了很多。

@Quoo：你知道为什么CSS现在可能会发生这种情况。这会是wordpress.stackexchange的问题吗？

Answer 1

您希望显示：阻止不显示：标题元素上的内联阻止。

Answer 2

您好，您可以定义标题显示：table;像这样

header {
width: 960px;
margin: 0 auto;
display: table;
}

Answer 3

您好，如果需要在中心导航，则无需在标题类中添加任何内容，这样就可以使用 margin：auto; ＆安培;宽度：960px; 如下所述样本： -

 header {
width: 960px;
margin: 0 auto;
}

根据上面的css，您的导航将进入中心.....