✔ Probleme bei V-Textausrichtung mit bg-image in <span>

[X-Color]

Hallo,
ich habe mir eine Navigation mithilfe von CSS erstellt, die einer Karteiauswahl ähnelt.
Sieht soweit gut aus, nur habe ich das Problem, das der Text am oben rand hängt und ich bisher keinen weg gefunden habe, diesen zentriert auszurichten, wie das angehängte Bild zeigt.

In der umsetzung sieht das ganze folgendermaßen aus...
HTML:

	<ul id="hauptnavigation">
		<li><a href="abenteuerreisen/abenteuerreisen.php" title="Reiseangebote anzeigen"><span>Reiseziel</span></a></li>
		<li><a href="#" title="Präsentationen anzeigen"><span>Präsentation</span></a></li>
		<li><a href="#" title="Reisehilfe anzeigen"><span>Reisehilfe</span></a></li>
		<li><a href="#" title="Kontaktmöglichkeiten anzeigen"><span>Kontakt</span></a></li>
	</ul>
	<ul id="subnavigation">
		<li><a href="#">Begrüßung</a></li>
		<li><a href="#">Nachrichten</a></li>
		<li><a href="#">Neue Angebote</a></li>
		<li><a href="#">Partner</a></li>
	</ul>

Innerhalb von <li> befindet sicht der <a href>, dieser href hat als Hintergrundbild den linken rand der Kartei (10x25px). Innerhalb des hrefs wird nochmals ein <span> geöffnet der den Link namen enthält und als Hintergrundbild die mitte, mit rechten Rand der Kartei.
Das bedeuted also, das egal wie lang der Linkname ist, sich die kartei anpassen kann und keine feste größe besitzt.

Nun der CSS Code:

#hauptnavigation li {
	display: inline;
}
#hauptnavigation li a {
	height: 25px;
	padding-left: 10px;
	float: left;
	background-image: url(../images/hauptnavi_inaktiv_links.gif);
	background-position: 0% 0%;
	background-repeat: no-repeat;
}
#hauptnavigation li a span {
	height: 25px;
	padding-right: 10px;
	padding-bottom: 11px;
	background-image: url(../images/hauptnavi_inaktiv_rechts.gif);
	background-position: 100% 0%;
	background-repeat: no-repeat;
}
#hauptnavigation li a span:hover {
	background-image: url(../images/hauptnavi_hover_rechts.gif);
}

Aber jeglicher versuch (padding, margin, vertical-align), den text in der vertikalen zu zentrieren, schlug bisher fehl...Entweder passierte garnichts, oder es zerschoss mir die Kartei...
habt ihr eine Ahnung was da helfen könnte? (IE und FF konform)...

danke für eure Hilfe,
Gruß X-Color

 

[Maik]

Hi,

tausche mal height:25px gegen line-height:25px aus, um den Linktext in der Vertikalen zu zentrieren.

Eventuell muß die padding-bottom:11px-Angabe entfernt werden, wenn sie ursprünglich zur vertikalen Zentrierung gedacht war.

 

[X-Color]

Super...vielen dank,
mit line-height und etwas padding-spielerrei funktioniert nun alles wie im anhang zu sehen

Gruß X-Color