How to center a ul within a div menu - css

Question

I'm trying to center a ul within a div menu. I've looked at other menu's and tried every combination I can think of, yet I still can't get it.
Here's the code:
#cssmenu ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:38px;
font-size:14px;
background:#f9f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
display:block;
float:left;
margin:0;
pading:0;
}
#cssmenu li a{
display:block;
float:left;
color:#333333;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:38px;
}
#cssmenu li a:hover{
text-decoration:underline;
}
<div id="cssmenu">
<ul>
<li>Home</li>
<li>About</li>
<li>The Program</li>
<li>Blog</li>
<li>Support</li>
<li>Members Login</li>
</ul>
</div>
Any help would be greatly appreciated.
Thanks!
Mike

Answer 1

You have to remove the width: 100% from the ul first. You can't really center something that is the same size as the container :). After removing that, you could make the list inline-block, so it takes up the width of its children, and then using a simple text-align on the div.
#cssmenu {
text-align: center;
}
#cssmenu ul{
display: inline-block;
}
Of course you will have to move some of your styles from the list to the div, because the list is not full width anymore.
jsFiddle Demo