Center CSS Links

HTML & CSS
1

So, I just used a css menu generator from cssmenumaker (awesome resource and site!!) and all I want to know is, how in the world can I center the links while leaving the width as it is? Thank you!

So, from this:

To This:

HTML

<ul class="menu green">
<li><a href="1.cfm" target="_self">1</a></li>
<li><a href="2.cfm" target="_self">2</a></li>
<li><a href="3.cfm" target="_self">3</a></li>
<li class="current"><a href="4.cfm" target="_self">4</a></li>
</ul>

Css I have now

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:11px;
background:url(../../images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
	float:left;
	color:#9E8D7C;
	text-decoration:none;
	height:24px;
	padding:9px 15px 0;
	font-weight:normal;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(../../images/bg.png) repeat-x top left;
text-decoration:none;
}

ul.menu .current a {
	color:#36362C;
	font-weight:700;
}


/*GREEN*/
ul.menu.green{
	background-color:#BEAF9A;
}
ul.menu.green li a:hover, .menu.green li.current {
	background-color:#699;
}
2

The easiest way to do it would be to change the <li>s from block to inline, and do away with all the floats. The text-align:center; on the <ul> will then do the job of keeping them in the middle. You might then need to work on the margin and padding of the list items and anchors to get it right for both regular elements and “current”. (The easiest answer there is to move class=“current” to the anchor rather than the list item)

3

Ahh ok, i will give that a whirl thanks Stevie!