Issue to horizontally center a menu - html

Question

I'm trying to center (horizontally) my horizontal menu to the middle of the page but without success. I've put the menu in a container that has margins left and right set to auto, but that doesn't work. Thanks for your help
http://jsfiddle.net/nB6x4/
/***** MENU *******/
.menu-container {
position: absolute;
top: 20px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
margin-right: -4px;
margin-left: 5px;
}
nav ul li {
display: inline-block;
margin-right: -4px;
margin-left: 5px;
vertical align: top;
}
nav a {
padding: 7px 10px;
text-decoration: none;
color: rgba(255,255,255,0.9);
background: rgba(0,0,0,0);
border-radius: 5px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
nav a:hover {
background: rgba(0,0,0,0.25)
}
.activeNav {
background: rgba(0,0,0,0.25)
}
nav ul li ul {
position: absolute;
display: block;
margin-top: 5px;
border-radius: 5px;
border-top-left-radius: 0;
background: none;
padding-top: 5px
}
nav ul li ul li {
display: block;
float: none;
margin: 0;
padding: 0
}
nav ul li ul li a {
display: block;
text-align: left;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px rgba(0,0,0,0.33);
padding: 10px
}
nav ul li ul li a:hover {
background: rgba(20,150,220,0.5);
color: white;
text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
display: block;
}
.hover span {
color: rgba(255,255,255,0.9);
background: rgba(20,150,220,0.5);
border-radius: 5px;
position: absolute;
display: block;
margin: 5px 0 0 -57px;
padding: 10px;
font-size: 13px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
cursor: default;
}
/**** END MENU ****/

Answer 1

Try this
Actually you need to make position relative and give it some width initially
.menu-container {
position: relative;
top: 20px;
margin: o auto;
max-width: 800px;
}
Hope this help, else try putting your html

Answer 2

You will need to specify a width in order for margin: 0 auto; to work.
http://jsfiddle.net/nB6x4/3/
Updated CSS:
nav {
margin: 20px auto;
width: 624px;
}
Alternatively, you could use text-align: center; along with display: inline-block; to accomplish this with content with an unknown width:
http://jsfiddle.net/nB6x4/4/
nav {
margin: 20px 0;
text-align: center;
}
nav ul {
padding: 0;
margin-right: -4px;
margin-left: 5px;
display: inline-block;
}

Answer 3

nav
{
float: right;
margin: 20px auto;
width: 100%;
text-align: center;
}
you can simple add text-align center to nav
Here is the Fiddle
it is not responsive, because you did not provide a responsive code

Answer 4

There are a few things you need to re-evaluate.
First of all, an absolutely positioned container can not be centered with margin, as margin: 0 auto; only effects relatively positioned elements.
So the very first thing you need to do is delete the position: absolute; on .menu_container.
.menu-container {
top: 20px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
Then, with the div relatively positioned, you have the property width set to 100%. This makes the div take up the full amount of width available to it from whatever element is it's parent. Adding margin: 0 auto; doesn't do anything and the left and right sides of the element are already touching the sides of the parent. You can't center something that "fits perfectly" so to speak in it's parent.
So there are a few things you can do. You can shrink the size of the container, say to 80%, and then it will start to center the container element, but not necessarily centering your nav links.
The better option in my opinion is to use text-align: center; to center the LI's since they are using display: inline-block. They retain their block characteristics but are also treated as "normal text" so to speak.
Simply changing the selector to what I have below should be all you need...
nav ul {
text-align: center;
margin-right: -4px;
margin-left: 5px;
}
JS Fiddle Demo