为什么我无法居中导航菜单？

我在这里的测试网站工作正常我相信（尚未在所有浏览器中测试过它，但是我的主要导航菜单不在顶部，中间有一个空白，因为徽标将会在那里，但我不希望它在本次测试的方式。为什么我无法居中导航菜单？

为什么我的导航为中心？

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>

正如你所看到的，我已经有“边距：0汽车;”在那里。所以我很困惑，为什么它不起作用。

This is the site

但是如果我取出显示：内联块;它工作正常，但当我的本地WordPress主题更新时，它下降了很多。

enter image description here

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

来源

2012-03-30 kia4567

删除显示：直列BLCK – Ibu 2012-03-30 20:40:43

文本对齐：中心; – Connor 2012-04-01 00:12:22

嗨，你可以定义你的标题显示：表;因为这样

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

来源

2012-03-31 04:33:56

工作！为什么这样做？我喜欢它！ – kia4567 2012-03-31 08:27:53

您希望显示：block not display：inline-block在您的标题元素上。

来源

2012-03-30 20:43:05 quoo

其中，应该注意的是头元素的默认显示值，因此您根本不需要指定它。 – quoo 2012-03-30 20:43:38

谢谢你的提升，但它仍然以不同的方式混乱。我编辑了原来的问题，以补充现在发生的事情。 – kia4567 2012-03-30 21:05:01

当你刚刚删除显示：inline-block ;,它对我来说工作正常。还没有发布的其他内容一定会导致您的其他问题。 – 2012-03-30 21:22:04

嗨，你不需要添加任何东西在你的头类，如果需要导航中心，因此将与您保证金：汽车; & width：960px;像下面提到样品： -

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

你的导航将根据上面的CSS进来中心.....

来源

2012-03-31 08:39:43

为什么我无法居中导航菜单？

回答

相关问题