text im <li>-Tag mittig setzen

[steffen]

Hi,

ich hab eine Navigation gemacht und möchte nun den text mittig setzen.
Das mache ich wiefolgt:

ul#navi li {
 vertical-align:middle;
}

Leider klappt das nicht. Nun hab ich reschachiert und eine Antwort in einem Forum gelesen, das besagt, dass vertical-align die li nicht untersützt.

Kann mit nun wer sagen, wie ich den Text nun doch mittig bekomme, ohne umständlich im code rumzupfuschen?

[Bobby]

Moin

Leider klappt das nicht. Nun hab ich reschachiert und eine Antwort in einem Forum gelesen, das besagt, dass vertical-align die li nicht untersützt.

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align Beschreibung von vertical-align bei W3.org

Das stimmt nur bedingt. Vertical-align ist für Table-Cells konzipiert und wird auch nur davon unterstützt. Es gibt jedoch einen Trick. Wenn deine LI nur 1-Zeilig sind und eine bestimmte höhe haben, kannst du die Line-height auf die selbe Höhe setzen wie die Höhe des Elementes LI und schon funktioniert auch das vertical-align.

Also ungefähr so:

ul#navi li {
   height:20px;
   line-height:20px;
   vertical-align:middle;
}

Das funktioniert aber nur mit vertical-align:middle. vertical-align:bottom funktioniert so nicht.

Gruß Bobby