導航欄中心位置

Question

我目前正在使用測試網站的底部導航欄。問題是導航欄沒有正確居中。我添加了.left屬性以保持每個塊列表彼此相鄰。我怎樣才能讓這個底部導航欄自動居中（不管添加的列表數量多少）？ Example

CSS與底部導航

<style> 
.bottomnavControls { 
    padding-top:10px; 
    padding-bottom:10px; 
    padding-right:0; 
    text-decoration:none; 
    list-style:none; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    background: #7a7a7a; 
    border-bottom: 15px solid #000; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 

</style> 

HTML

<div id="footer"> 
    <div class="bottomNav"> 
      <ul class="bottomnavControls left"> 
      <li style="padding-bottom:5px;"><b>Home</b></li> 
      <li><a href="" class="footer">Login</a></li> 
      </ul>  

      <ul class="bottomnavControls left"> 
      <li style="padding-bottom:5px;"><b>Category</b></li> 
      <li><a href="" class="footer">Games</a></li> 
      </ul> 

      <ul class="bottomnavControls left"> 
      <li style="padding-bottom:5px;"><b>About</b></li> 
      <li><a href="" class="footer">Who We Are</a></li> 
      </ul> 

      <ul class="bottomnavControls left"> 
      <li style="padding-bottom:5px;"><b>Links</b></li> 
      <li><a href="www.google.com" target="_new" class="footer">Google</a></li> 
      </ul> 

      <ul class="bottomnavControls left"> 
     <li style="padding-bottom:5px;"><b>Other Stuff</b></li> 
      <li><a href="" class="footer">Stuff</a></li> 
      </ul>  
     </div> 
</div> 

我目前的底部導航：

我想要的結果：

Answer 1

相反的float，你應該在這裏使用display: inline-block。這樣，您可以輕鬆地將text-align: center放在容器中心。

.bottomNav { text-align: center; } 
.bottomnavControls { display: inline-block; } 

並刪除left類。

注意：display: inline-block在現代瀏覽器中正常工作，但它needs a hack in IE7。