[CSS/DIV] Löst die CSS-Seitenzentrierung perfekt

Eine gängige CSS-Methode zur horizontalen Zentrierung von Elementen

Das Zentrieren von Elementen mit CSS ist keine triviale Angelegenheit – dieselben legitimen CSS-Zentrierungseinstellungen verhalten sich in verschiedenen Browsern unterschiedlich. Beginnen wir damit, einige gängige Methoden anzuschauen, um Elemente horizontal in CSS zu zentrieren.

1. Zentrierung mit automatischen Rändern

Die bevorzugte Methode, Elemente horizontal in CSS zu zentrieren, ist die Verwendung der Margin-Eigenschaft – einfach die Margin-Links- und Margin-Rechts-Eigenschaften auf Auto setzen. In der Praxis können wir eine Container-Div für diese Elemente erstellen, die zentriert werden müssen. Eine Sache, die man beachten sollte, ist, dass die Breite des Containers angegeben werden muss:

div#container{ margin-left:auto; Rand rechts: Auto; Breite: 168 px; }

Dieser Ansatz funktioniert in den meisten großen Browsern sehr gut, sogar IE6 unter Windows kann im Standard-Compliance-Modus korrekt angezeigt werden. Leider erreicht diese Einstellung in niedrigeren IE-Versionen keinen zentrierenden Effekt. Wenn du diese Methode also in einem echten Projekt verwenden möchtest, stelle sicher, dass die IE-Browser-Version des Nutzers nicht niedriger als 6.0 ist.

Trotz fehlender Unterstützung empfehlen die meisten Designer diesen Ansatz so weit wie möglich. Diese Methode gilt auch als die korrekteste und vernünftigste aller Methoden zur Implementierung von Elementebenenzentrierung mit CSS.

2. Verwenden Sie Text-Align, um Zentrierung zu erreichen

Eine weitere Möglichkeit, Elementzentrierung zu erreichen, ist die Verwendung der Text-Align-Eigenschaft, setzt den Wert der Eigenschaft auf Zentrierung und wendet ihn auf das Körperelement an. Es ist ein Hack durch und durch, aber mit den meisten Browsern kompatibel, daher ist es in manchen Fällen natürlich unerlässlich.

Sie wird als Hack bezeichnet, weil diese Methode keine Texteigenschaften auf den Text anwendet, sondern auf das Element, das der Container ist. Das gibt uns auch zusätzliche Arbeit. Nachdem wir die notwendigen Divs für das Layout erstellt haben, müssen wir die Text-Align-Eigenschaft gemäß folgendem Code auf den Hauptteil anwenden:

body{ text-align:center; }

Wird es danach noch Probleme geben? Alle Nachkommen des Körpers sind zentriert.

Daher müssen wir eine weitere Regel schreiben, um den Text auf die Standardausrichtung der linken Hand zurückzubringen:

p{ text-align:left; }

Es ist denkbar, dass diese zusätzliche Regel einige Unannehmlichkeiten verursachen wird. Außerdem ändert ein Browser, der wirklich dem Standard folgt, nicht die Position des Containers, sondern zentriert nur den Text darin.

3. Verwenden Sie eine Kombination aus automatischer Rand und Textausrichtung

Da die Textausrichtungsmethode eine gute Abwärtskompatibilität bietet und die automatische Auffüllmethode auch von den meisten zeitgenössischen Browsern unterstützt wird, verwenden viele Entwickler eine Kombination aus beidem, um die browserübergreifende Unterstützung für den Zentrierungseffekt zu maximieren:

body{ text-align:center; } #container{ margin-left:auto; Rand rechts: Auto; Rand:1pxsolidred; Breite: 168 px; text-align:left }

Aber das ist immer ein Hack und keineswegs perfekt. Wir müssen noch zusätzliche Regeln für den Text im zentrierten Container schreiben, aber zumindest sieht es in verschiedenen Browsern gut aus.

4. Lösung des negativen äußeren Randes

Lösungen mit negativen Margen sind weit davon entfernt, so einfach zu sein wie das Hinzufügen negativer Margen zu Elementen. Diese Methode erfordert sowohl den Einsatz von absoluter Positionierung als auch von negativen Margen.

Im Folgenden ist die spezifische Implementierungsmethode dieses Schemas aufgeführt. Erstellen Sie zunächst einen Container mit zentrierten Elementen und positionieren Sie ihn etwa 50 % der linken Seite der Seite. So beginnt der linke Rand des Containers bei 50 % der Seitenbreite.

Dann setzen Sie den linken Marginwert des Containers auf die Hälfte der negativen Containerbreite. Dadurch wird der Behälter an der Mitte der horizontalen Seitenrichtung fixiert.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; Position: absolut; links: 50%; Breite: 760 px; margin-links:-380px; }

Keine Hacks! Auch wenn das nicht die bevorzugte Lösung ist, ist es eine gute Methode und sehr vielseitig – überraschenderweise funktioniert es nicht einmal problemlos in NetscapeNavigator 4.x, oder? Wenn Sie also das größtmögliche Spektrum an Browser-Unterstützung wünschen, ist diese Methode die beste Wahl.