無法正確居中導航欄（使用col-md-3）bootstrap css和html

Question

所以基本上我有這樣的代碼：下面的HTML和CSS，使用bootstrap以及由於某種原因，它不居中。它曾經是，但是在某個時候它已經不在了，現在它向左拉。見下圖。有任何想法嗎？

<div class="row" id="nav-bar"> 
    <div class="col-md-9"> 
     <ul> 
      <li class="col-md-3 nav-btn" id="home"><a href="index.html">Home</a></li> 
      <li class="col-md-3 nav-btn" id="about"><a href="about.html">About</a></li> 
      <li class="col-md-3 nav-btn dropdown-toggle" id="games"> 
       <a href="#">Games & Apps &#9660;</a> 
       <div class="dropdown"> 
        <ul> 
         <li><a href="#" id="games2">Games & Apps &#9660;</a></li> 
         <li id="first"><a href="#">Space Rodeo</a></li> 
         <li id="spaced"><a href="#">Boodya's Carpet Ride</a></li> 
         <li id="spaced"><a href="#">Ultimate Points Counter</a></li> 
        </ul> 
       </div> 
      </li> 
      <li class="col-md-3 nav-btn" id="blog"><a href="blog.html">Blog</a></li> 
     </ul> 
    </div>        
</div> 

#nav-bar { 
margin: 0px 0px 10px 0px; 
height: 60px; 
} 

#nav-bar ul { 
    margin-top: 20px; 
} 

.col-md-3 a { 
    padding: 15px 40px 15px 40px; 
    font-size: 20px; 
    text-decoration: none; 
    text-align: center; 
    color: #B6B6B6; 
} 

#nav-bar a:hover { 
    color: #428bca; 
} 

.col-md-3 { 
    display: inline; 
} 

.col-md-9 { 
    float: none; 
    margin: auto; 
    left: 0; 
    right: 0; 
} 

.dropdown { 
    padding: 0; 
    margin-top: -48px; 
    position: absolute; 
    z-index: 10; 
    background-color: #ffffff; 
    box-shadow: -5px -5px 20px; 
    border-radius: 5px; 
    height: 210px; 
    width: 275px; 
} 

.dropdown ul { 
    padding: 0; 
    margin-top: 0; 
} 

.dropdown li { 
    list-style: none; 
    padding: 0; 
    width: 310px; 
} 

#games2 { 
    color: #428bca; 
} 

#spaced { 
    margin-top: 10px; 
} 

#first { 
    padding-top: 20px; 
    border-top: 1px solid black; 
    margin-top: 22px; 
} 

顯示的代碼結果，導航欄是偏離中心

http://i.stack.imgur.com/smtTP.png

Answer 1

列表項是display: inline，這意味着他們將遵循文本的對齊規則。由於您沒有設置text-align，因此默認爲左側。您可以通過將text-align: center添加到您的ul來解決該問題，這樣內容將居中。

現在下拉菜單的內部也會繼承該功能，您可以通過將text-align: left重新設置爲ul再次將其重置。

還重置默認情況下ul具有的左填充。

#nav-bar ul { 
    padding-left: 0; 
    text-align: center; 
} 

#nav-bar .dropdown ul { 
    text-align: left; 
} 

作品在此jsFiddle