导航栏中心位置

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。