Dynamische Navigtionsbuttons?

[FunkFlex]

Hi, ich hab mal wieder ein kleines Problem und komm einfach nicht auf die Lösung!
Ich will ein Navigationsmenü basteln, das möglichst dynamisch is, d.h. ich hab Hintergrundbilder und auf die soll dann der Text aus dem html Code, bzw den <li> Elementen. Nun funktioniert das, nur die Schrift ordnet sich immer am oberen rand des Buttons an.
Wisst ihr wie ich das anders machen kann? So dass sich die Schrift in der Mitte vom Button anordnet. Achja der Button is als Hintergrundgrafik hinterlegt!
Gruß FunkFlex

Hier html:

	<div id="navigation">
		<div class="outer">
<span class="outer">mmmmmm</span>
<a class="down-1" href="#">nnnnnnn</a>
<a class="down" href="#">wwwwwww</a>

		</div>
		<div class="outer">
<span class="outer">qqqqqqq</span>
<a class="down" href="#">xxxxxx</a>
<a class="down" href="#">yyyyyyys</a>
<a class="down" href="#">zzzzz</a>
<a class="down" href="#">jjjjjjjjj</a>
		</div>

und hier des css dazu:

#navigation{
	width:792px;
	height:40px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	
}

#navigation .outer {
	float: left;
	display: block;
	font-weight: bold;
	width:130px;
	height:40px;
	text-align:center;
	vertical-align:middle;
	background-image:url(navbut.gif);
	font-family:Verdana, Geneva, sans-serif;
	vertical-align:middle;
	
}
#navigation .outer:hover{
	float:left;
	display:block;
	font-weight: bold;
	width:130px;
	height:40px;
	text-align:center;
	background-image:url(navbuthov.gif);
	vertical-align:middle;
}
#naviation .outer:visited {
	float:left;
	display:block;
	font-weight: bold;
	width:130px;
	height:40px;
	text-align:center;
	background-image:url(navbut.gif);
	vertical-align:middle;
}

 

[Quaese]

Hi,

gib die Höhe über die line-height-Eigenschaft an:

#navigation .outer {
	float: left;
	display: block;
	font-weight: bold;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	vertical-align:middle;
	background-image:url(navbut.gif);
	font-family:Verdana, Geneva, sans-serif;
	vertical-align:middle;
}

Ciao
Quaese