Question

I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example

CSS related to bottom navigation

<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>

My current Bottom navigation:

My desired outcome:

Answer 1

Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.

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

and remove left class.

Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.