yatay menudeki yazıyı ortalayamıyorum

arkadaslar yatay menudeki yazıyı birturlu ortalayamıyorum float left yapmak zorunda kaldım yazılar arka plan üzerine oturmuyor yoksa nasıl düzeltirim bunu yazıların ortada olmasını istiyorum

style aşagıdaki şekilde

.menu{
position:relative;
	margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
	background:url('imgs/menu.png') repeat-x;		

}
.menu-bg{

	background:url('imgs/menu.png') repeat-x;
	height:39px; 
}

.menu-bg ul{
	list-style:none;
	margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}
.menu-bg li{
	float:left;
	list-style:none;
	margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}
.menu-bg li a{
	
	float:left;
	display:block;
	color:#fff;
	text-decoration:none;
	font:15px 'Lucida Console', sans-serif;
	font-weight:bold;
	padding: 0 0 18px;
	height:64px;
	line-height:40px;
	margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
	cursor:pointer;	
}	

.menu-bg li a:hover{
	color:#fff;
	background:url('imgs/sec_sol.png') no-repeat left 5px;
}

.menu-bg li a:hover span{
	color:#fff;
	background:url('imgs/sec_sag.png') no-repeat right 5px;
}

.menu-bg li a span{
	float:left;
	display:block;
	padding:0 32px 0 18px;
	}

html kodu

<div class="menu">


<div class="menu-bg">
<ul>
	<li class="current"><a href="#"><span>ana sayfa</span></a></li>
	<li><a href="#"><span>son eklenenler</a></span></li>
	<li><a href="#"><span>en sevilenler</span></a></li>	
	<li><a href="#"><span>iletişim</span></a></li>		
	
</ul>
</div>
</div>