how can I center this menu with CSS

Question

I have this menu fixed, how can I center this menu?
I already tried with margin: 0 auto, and float: left, but it doesn\'t work.
Are there any way to center ??
he

Answer 1

You can change the #mainnav li as from float: left; to display: inline-block;

#main-nav li {
    position: relative;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: inline-block;
}

and then you can use text-align: center; on the ul.

#main-nav {
...
     text-align: center;
...
}

Working Demo: http://jsfiddle.net/rSc9s/

Answer 2

To make it vertically center need to remove display from the #main-nav li

#main-nav li {
    position: relative;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

Add text-align: center; in #main-nav

Answer 3

try this:

<style>
#main-nav li {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: inline-block;
    position: relative;
}
</style>

Answer 4

#main-nav { list-style: none outside; text-align: center; }

#main-nav li { display: inline; }

#main-nav li a { display: inline-block; }

I think this is what you are looking for