In den
FAQ Punkt 14 steht noch eine Lösung, die ich vor einigen Jahren mal geschrieben hatte. (das dort stehende span plus den CC für IE7- kann man inzwischen natürlich auch weglassen, denn ab IE8 laufen display: table & Co. ja.)
Das Problem ist halt die Höhe - sollen die Texte vertikal zentriert sein, müssen alle Elemente, in denen zentriert werden soll, dieselbe Höhe haben. Die bekommen sie zwar durch display: table-cell; automatisch, aber das reicht eben nur bis zu li, nicht a.
(würde man die Navi nicht als ul darstellen, sondern als lauter a nebeneinander, ginge es auch mit a, aber sowas ist natürlich indiskutabel.)
Und der Punkt bei der einheitlichen Höhe ist halt die
anklickbare Fläche, die möglichst überall gleich sein soll, und dafür muss eben für alle a dieselbe Höhe deklariert werden, denn anders erfahren sie nicht, wie hoch die a-Elemente in den benachbarten li sind.
Letztlich ist das aber auch kein Problem, denn height wirkt bei td (sowie als solchen dargestellten Elementen) eh wie min-height, und da man height hier sinnvollerweise in em deklariert, dürfte der min-height-Aspekt eh nie zum Tragen kommen.
Solltest Du trotz allem keine Höhe vergeben wollen und die gleich hohe anklickbare Fläche ist nicht so wichtig, kannst Du height auch weglassen (dann ergibt sich die Höhe der Navi automatisch aus der des höchsten a), und dann ist sogar auch noch eine Alternative möglich:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
ul {
float: left;
list-style: none;
background: red;
white-space: nowrap;
}
li {
display: inline-block;
vertical-align: middle;
margin: 0 10px;
}
a {
display: block;
color: white;
padding: 15px;
}
</style>
<body>
<ul>
<li><a href="#">Text</a></li>
<li><a href="#">Text<br>Text</a></li>
<li><a href="#">Text<br>Text<br>Text</a></li>
<li><a href="#">Text</a></li>
</ul>