align li menu items center - html

Question

i have this css code for my responsive css menu:
nav, ul, li, a {
margin: 0; padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
but i cannot get the menu items to align in the centre of the menu/page
here is a fiddle with the full code:
http://jsfiddle.net/5Z2QV/

Answer 1

Is THIS FIDDLE what you want?
If so, then you have to remove float from the lis and add display: inline-block to them. Then you have to add text-align: center to the .nav
.nav {
list-style: none;
background:#f36f25;
text-align: center;
border-top: 1px solid #104336;
}
.nav > li {
display: inline-block;
}
I also removed border-top from the li and put it in the .nav to remove the gaps between lis.
EDIT:
To keep sub-menu items aligned to the left, add this CSS:
.nav li {
text-align: left;
}
EDIT2:
You don't need this adjustMenu() javascript function. You can use media queries. Modify your #media section a bit. Add this style:
.nav {
border-top: none;
}
and replace style for .nav > li with this:
.nav > li {
display: block;
border-top: 1px solid #104336;
}
Also, I noticed that in the small range of resolution, one menu item breaks into new line. To prevent this, you can add this style to the .nav
white-space: nowrap;
overflow: hidden;
Here's the update fiddle: http://jsfiddle.net/5Z2QV/9/