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>