How to center CSS Navigation Menu - css

Question

Please can someone help?
How can I centre this CSS menu?
See below for the beginning of the code
Whatever I try doesn't seem to work.
I'm sure it is quite simple really but I cannot figure it out.
Thanks in advance!
#cssmenu {
position: relative;
height: 44px;
background: #ffffff;
width: auto;
float: left;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
position:relative;
display: inline-block;
vertical-align: top;
}
#cssmenu > ul {
position: relative;
display: block;
background: #ffffff;
height: 32px;
width: 100%;
z-index: 500;
}
#cssmenu > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
position:relative;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: 'Noto Sans';
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #000000;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #000000;
}
#cssmenu li.has-sub::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #000000;
}
#cssmenu > ul > li:hover::after {
border-top-color: #000000;
}
HTML
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Answer 1

One way of doing it is by setting the display type of #cssmenu to inline-block and then wrap everything in a container with text-align: center. You also need to set text-align: left on #cssmenu such that the text aligns correctly again.
JSFiddle

Answer 2

Ok, I'm going to assume that in your HTML, the #cssmenu element is the one you are trying to center.
As others have said, block elements can be centered by using a width: and a margin: 0 auto.
The dilema here is that if you set a width to it, then you have to adjust the width everytime the menu items change, so what I do is leave it without a width attribute and only enhance it (center it) for users with JS support.
If using jQuery, you could do something like this:
function navCenter(){
if($('#cssmenu').length){
var ulWidth = 0;
$('#cssmenu > ul > li').each(function(){
ulWidth += $(this).outerWidth(true);
});
$('#cssmenu').css('width', ulWidth);
}
}
So the above piece of code sets a width on the #cssmenu element and the css applies a margin: 0 auto, centering it.
Let me know if this make sense.

Answer 3

This is how you can center the ul with all its list-items in a container without js or jquery. There's no need to adjust something if the list-items are changed.
<div class="menuwrapper">
<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
.menuwrapper {
width: 100%;
text-align: center;
}
.nav, .nav li, .nav a {
margin: 0;
padding: 0;
border: 0;
}
.nav {
float: left;
position: relative;
left: 50%;
top: 0;
list-style-type: none;
text-align: center;
}
.nav li {
float: left;
width: auto;
right: 50%;
display: block;
position: relative;
list-style-type: none;
cursor: pointer;
}
.nav a {
display: block;
padding: 8px 10px;
text-decoration: none;
font: bold 16px arial,sans-serif;
line-height: 1;
outline: 0;
}