导航栏中心位置

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。