Das Zentrieren eines Elements mit CSS ist keine einfache Sache – dieselbe gültige CSS-Zentrierungseinstellung verhält sich in verschiedenen Browsern unterschiedlich. Werfen wir zunächst einen Blick auf einige gängige Methoden in CSS, um Elemente horizontal zu zentrieren.
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:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px
}
Diese Methode funktioniert in den meisten gängigen Browsern sehr gut, auch in IE6 auf der Windows-Plattform normal angezeigt. 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 Text anwenden:
body{
text-align:center
}
Wird es danach irgendwelche Probleme geben? Alle abgeleiteten Elemente des Körpers werden zentriert angezeigt.
Daher müssen wir eine weitere Regel schreiben, um den Text auf die standardmäßige linke Ausrichtung zurückzusetzen:
p {
text-align:left;
}
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 Maximale browserübergreifende Unterstützung erhalten:
body {
Textausrichtung: Mitte;
}
#container {
margin-left: auto;
Rand rechts: auto;
Rand: 1 Pixel durchgehend rot;
Breite: 168px;
Textausrichtung: links
}
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.
#container {
Hintergrund: #ffc url(mid.jpg) Repeat-y Center;
Position: absolut;
links: 50 %;
Breite: 760px;
Rand links: -380px;
}
Sehen Sie, es gibt keinen Hack! Obwohl dies nicht die bevorzugte Lösung ist, ist es ein guter Ansatz und funktioniert sehr gut – es funktioniert sogar in Netscape Navigator 4.x ohne Probleme, was überraschend ist, nicht wahr? Wenn Sie also die umfassendste Browserunterstützung wünschen, ist diese Methode die beste Wahl.