Ho questa pagina html:

codice:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/theartofweb.css">
</head>
<body>
<div id="wrap">
<div id="menu">
Home | Webdesign | Contact | Links
</div>
ciao
</div>
</body>
</html>
a cui viene applicata questo foglio di stile:

codice:
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: small;
	line-height: 1.5em;
}
#wrap {
	position: relative;
	margin: 0 auto;
	padding: 0;
  	width: 745px;
  	background: #fff;
}
#menu {
	border: 1px solid red;
	background: url(../img/menu.gif) repeat top left;
	height:23px;
	padding: 0;
	margin: 0;
	text-align: left;
	font: 8pt/8pt verdana, helvetica, sans-serif;
	color: #ccc;
}
#menu a {
	font: 10px verdana, helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none
}
#menu a:hover {
	color: #EB9F3D;
	text-decoration: underline
}
come faccio ad allineare gli elementi verticalmente in middle?

ho provato aggiungentdo: vertical-align: middle; ma non funge.

se metto il padding di #menu a: padding: 5px 0px 5px 0px; il testo viene centrato ma il box non è più alto 23px ma di più (quindi l'immagine in background si ripete verso il basso..btw:come lo evito?)

avete qualche dritta al riguardo?

(l'immagine della background la potete trovare quà: http://www.theartofweb.altervista.or...e/img/menu.gif)