Das Zentrieren eines Elements mithilfe von CSS ist keine einfache Angelegenheit. Dieselbe CSS-Zentrierungseinstellung verhält sich in verschiedenen Browsern unterschiedlich. In diesem Artikel werden mehrere gängige CSS-Methoden zum horizontalen Zentrieren von Elementen vorgestellt.
1. Verwenden Sie automatische Ränder, um eine Zentrierung zu erreichen.
Die bevorzugte Methode zum horizontalen Zentrieren eines Elements in CSS ist die Verwendung des Randattributs – setzen Sie einfach die Attribute „margin-left“ und „margin-right“ des Elements auf „auto“. Bei der tatsächlichen Verwendung können wir ein Div erstellen, das als Container für diese Elemente fungiert, die zentriert werden müssen. Zu beachten ist insbesondere, dass für den Container die Breite angegeben werden muss:
Diese Methode funktioniert in den meisten Mainstream-Browsern sehr gut, und selbst IE6 auf der Windows-Plattform kann im Standard-Compliance-Modus normal angezeigt werden. Aber leider erreicht diese Einstellung in niedrigeren IE-Versionen nicht den Zentrierungseffekt. Wenn Sie diese Methode in tatsächlichen Projekten verwenden möchten, müssen Sie daher sicherstellen, dass die IE-Browserversion des Benutzers nicht niedriger als 6.0 ist.
Auch wenn die Unterstützung nicht optimal ist, empfehlen die meisten Designer, wann immer möglich, diesen Ansatz zu verwenden. Diese Methode gilt auch als die korrekteste und sinnvollste unter den verschiedenen Methoden, um mithilfe von CSS eine horizontale Zentrierung von Elementen zu erreichen.
2. Verwenden Sie text-align, um eine
Zentrierung von Elementen zu erreichen, indem Sie den Attributwert auf „center“ setzen und ihn auf das Body-Element anwenden. Dieser Ansatz ist ein kompletter Hack, aber er ist mit den meisten Browsern kompatibel und daher in manchen Fällen natürlich notwendig.
Der Grund für die Bezeichnung Hack liegt darin, dass diese Methode das Textattribut nicht auf den Text anwendet, sondern auf das Element, das den Container darstellt. Das verursacht auch für uns Mehrarbeit. Nachdem wir die notwendigen Divs für das Layout erstellt haben, müssen wir das text-align-Attribut gemäß dem folgenden Code auf den Textkörper anwenden:
Wird es später Probleme geben? Alle abgeleiteten Elemente des Körpers werden zentriert angezeigt.
Daher müssen wir eine weitere Regel schreiben, um den Text wieder auf die standardmäßige linke Ausrichtung zurückzusetzen:
Sie können sich vorstellen, dass diese zusätzliche Regelung einige Unannehmlichkeiten mit sich bringen wird. Darüber hinaus ändern Browser, die den Standards wirklich vollständig entsprechen, die Position des Containers nicht, sondern zentrieren nur den Text darin.
3. Verwenden Sie automatische Ränder und Textausrichtung in Kombination.
Da die Methode zur Textausrichtung und -zentrierung eine gute Abwärtskompatibilität aufweist und die automatische Randmethode auch von den meisten modernen Browsern unterstützt wird, verwenden viele Designer eine Kombination aus beiden, um Zentrierungseffekte zu erzielen Erhalten Sie maximale browserübergreifende Unterstützung:
Aber das ist immer noch ein Hack, und er ist keineswegs perfekt. Wir müssen noch zusätzliche Regeln für die Zentrierung des Textes im Container schreiben, aber zumindest sieht es in allen Browsern gut aus.
4. Lösung mit negativem Rand
Die Lösung mit negativem Rand ist weit mehr als nur das Hinzufügen negativer Ränder zu Elementen. Diese Methode erfordert die Verwendung sowohl der absoluten Positionierung als auch der negativen Margen.
Das Folgende ist die spezifische Implementierungsmethode dieser Lösung. Erstellen Sie zunächst einen Container, der das zentrierte Element enthält, und positionieren Sie es dann absolut 50 % vom linken Rand der Seite entfernt. Auf diese Weise beginnt der linke Rand des Containers bei 50 % der Seitenbreite.
Stellen Sie dann den linken Randwert des Containers auf eine negative Hälfte der Containerbreite ein. Dadurch wird der Container in der horizontalen Mitte der Seite verankert.
Obwohl dies nicht die bevorzugte Lösung ist, handelt es sich um einen guten Ansatz mit einem breiten Anwendungsbereich.