Floatende Elemente zentrieren

Will man Elemente zentrieren, die links oder rechts floaten, bekommt man mit herkömmlichen CSS-Mitteln schnell ein Problem, denn bei einem Element mit der Eigenschaft „float” funktioniert der Befehl „text-align: center” oder „margin: 0px auto” nicht. Wozu sollte man auch versuchen, floatende Elemente zu zentrieren? Hier ein Beispiel, bei dem ich vor kurzem genau vor dem Problem stand:

Ich wollte eine horizontale Navigation erstellen, die zentriert im Head der Seite dargestellt werden sollte. Semantisch korrekt natürlich als eine unordered list. Hier das reine HTML:

<div id=”navbar”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Das wurde dann mit folgendem CSS gestylt:

#nav {
width: 100%;
height: 30px;
position: relative;
overflow: hidden;
}

Nun stylen wir die eigentliche Navigation:

#nav ul {
position: relative;
list-style: none;
left: 50%;
}

#nav ul li {
position: relative;
right: 50%;
float: left;
}

Das wars schon. Die einzelnen Navigationspunkte werden jetzt alle nebeneinander stehen und gleichzeitig im Container “nav” zentriert sein.

Tags: , , , ,

1 Kommentar for “Floatende Elemente zentrieren”

  1. 2. Oktober 2009, 10:01
    hansdampf sagt:

    funktioniert nicht, haben sich etliche fehler eingeschlichen. fängt schon mit der ID an…

Kommentar hinterlassen




CommentLuv Enabled