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.

Ähnliche Artikel:

Tags: , , , ,

2 Kommentare 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…

  2. 8. Juni 2012, 10:39
    Elroy sagt:

    Ich kann hansdampf nur zustimmen.

    Semantisch korrekt waere es ausserdem noch das nutzlose div weg zu lassen, leider gibt es immer wieder Webmaster die ohne div nicht klar kommen.

    Gruss
    Elroy

Kommentar hinterlassen




CommentLuv badge