Vertikal zentrieren in horizonaltem Menü
jonasbraunmuehl
- css
0 Beat
Hallo Zusammen.
Ich möchte für eine Seite ein horizontales Menü einrichten, in dem sowohl einzeilige, als auch zweizeilige Menüpunkte stehen können. Für den Umbruch habe ich die CSS Funktion "max-width" genutzt. Nun will ich aber, dass alle Menüpunkte in der Menüzeile vertikal zentriert werden. Leider klappt letzteres nicht und ich bin ratlos, wieso. Habt ihr eine Idee?
Hier der CSS und HTML Code:
div#menu { background-color: blue; }
div#menu ul { display: block; list-style: none; }
div#menu ul li { float: left; max-width: 150px; padding: 0 25px; height: 50px; vertical-align: middle; border: 1px black solid; background-color: red;}
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3 mit extra Zeile</li>
<li>Link 4</li>
</ul>
</div>
Danke für eure Hilfe!
Jonas
Habt ihr eine Idee?
mfg Beat