Ho un menu orizzontale che deve avere il classico stato hover con un immagine di sfondo il codice css è:

codice:
#menu{
	height: 42px;
	width: 100%;
	background-image: url(images/bg_menu.gif);
	font-size: 14px;
	padding-left: 25px;
	margin-top: 20px;
}
#menu ul{
	margin-right: 60px;
}

#menu ul li a{
	color: #FFFFFF;
	float: left;
	padding:0
	display: block;
	width: 162px;
	height: 40px;
	text-decoration: none;
	text-align: center;
}
#menu ul li a:hover{
	display: block;
	background: url(images/pul_push.gif) center bottom;
	
}
#menu ul li .visited{
	display: block;
	background: url(images/pul_down.gif) center bottom;
	
}
il problema è che il testo viene allineato a top del div menu.
come faccio ad allinearlo al centro del div (non funz vertica-allign) tenendo conto che ho un immagine di sfondo e che se metto il padding-top mi sposta anche l'immagine?