Centering a ul with floats inside a div..

Question

I'm trying to center this bottom nav on a test site: http://heroicdreams.com/kktest/

The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered. To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered.

Is there a way?

I've looked through a variety of posts on here but can't find one that specifically answers what I'm looking for.

Answer 1

often using:

.divStyle {
    text-align: center;
}
ul.styleName {
    margin: 0 auto; 
    text-align: left;
}

will do the trick.

Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.

Answer 2

Either CSS:

margin: 0px auto;

or

/*on the nav's parent*/
text-align: center;

/*on the nav*/
text-align: left;

Answer 3

In order for margin:0 auto to work you need to set a width on your ul and remove the display:inline

#footerLinks ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width:400px;
}