dynamische Divs horizontal zentrieren
Jeder Web-Entwickler ist im Laufe der Zeit irgendwann auf das Problem gestoßen, dass er mehrere Elemente unbekannter Länge in einem in einem Container horizontal zentrieren muss. Zu <TABLE>-Zeiten war das noch recht einfach, doch dies mit Divs zu realisieren ist ein bisschen anders. Zu diesem Thema gibt es wohl unendlich viele Texte und Foreneinträge fragwürdiger Qualität. Ich wollte nun ein für alle mal dieses Thema darstellen und auch für mich selber festhalten.
Für dieses Thema sehe ich grundsätzlich zwei Möglichkeiten:
- Variante 1
Zb.: Die zu zentrierenden Elemente dynamischer Länge als Listenelemente <li> zu verwenden. mit einem <ul> Container der diese Styledefinition trägt:
display:inline;
Beispiel
-
Variante 2
Hat man das Problem, dass das zu zentrierende Element Layoutteschnisch nicht mit einem einzigen <li>-Tag dargestellt werden kann, wird Variante 1 nicht zum Erfolg führen. Angenommen Sie wollen dieses Element Zentrieren.
Dieses Element besteht aus zwei kleinen Bildern Rechts und links und einem 1Pixel breitem Hintergrundbild in der Mitte.
Mit einem einzigen <li> wie bei Variante 1 ist das nicht wirklich umsetzbar.
Hier müss ein Containerdiv mit follgenden Styledefinitionen erstellt werden:
margin-left:auto; margin-right:auto; display:table;
Der IE Version 6 benötigt zusätzlich noch die Definition text-align: center;. Wer also den IE6 noch ins Boot nehmen will, bei dem muss die Definition vom Container so aussehen:
margin-left: auto;margin-right: auto;display: table;margin-top:24px;text-align: center;
Beispiel
Variante 1.5
Wobei dieser Fall eigendlich ein schlechtes Beispiel ist, da mann diese Anforderung mit sogenannten pseudoklassen (before und after) sehr wohl in einem einzigen <li> -Tag umsetzen kann.
noch ein Text unbekannter Länge
Ein Beispiel gibts Hier:
Beispiel
Ich freue mich über jegliche Fragen und Anregungen zum Thema: tom@kk-bits.com
| 
