爲什麼我無法居中導航菜單？

我在這裏的測試網站工作正常我相信（尚未在所有瀏覽器中測試過它，但是我的主要導航菜單不在頂部，中間有一個空白，因爲徽標將會在那裏，但我不希望它在本次測試的方式。爲什麼我無法居中導航菜單？

爲什麼我的導航爲中心？

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

爲什麼我無法居中導航菜單？

回答

相關問題