Schauen wir uns zunächst meinen einfachen XHTML/HTML-Dateicode (Teil) an. Unser Ziel ist es, #container horizontal zu zentrieren.
<Körper>
<div id="container">
<h1>Inhalt</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>Adaptive Ränder verwenden (automatischer Rand)
Die bevorzugte Möglichkeit, ein Element horizontal zu zentrieren, besteht darin, die Eigenschaft „margin“ zu verwenden und die linken und rechten Werte auf „Auto“ zu setzen. Sie müssen jedoch eine Breite für #container angeben.
div#container {
margin-left: auto;
Rand rechts: auto;
Breite:168px;
}
Diese Lösung funktioniert auf jedem modernen Browser, sogar IE6, solange er sich im Webstandard-Compliance-Modus befindet. Leider funktioniert es in früheren Versionen von IE/Win nicht. Wir erstellen hierfür eine Tabelle: Liste der unterstützten Browserversionen mit adaptivem Rand. Unterstützte Browserversionen
Internet Explorer 6.0, Compliance-Modus Ja
Internet Explorer 6.0, Mackenmodus Nr
Internet Explorer 5.5 Windows Nr
Internet Explorer 5.0 Windows Nr
Internet Explorer 5.2 Macintosh Ja
Alle aktuellen Versionen von Mozilla sind
Alle Versionen von Mozilla Firefox sind
Netscape 4.x Nr
Netscape 6.x+ Ja
Opera 6.0, 7.0 Macintosh und Windows Ja
Safari 1.2 Ja
Auch wenn die Browserunterstützung dies einschränkt, empfehlen Ihnen die meisten Designer, dies nach Möglichkeit zu tun. Aber wir können CSS immer noch für alle Situationen verwenden. Verwenden der Textausrichtung (text-align) Diese Lösung erfordert die Verwendung der text-align-Eigenschaft, die auf das Body-Element angewendet wird und dem der Wert „center“ zugewiesen wird.
Körper{
text-align:center;
}
Es wird allen Browsern gerecht, ist umfassend und immer griffbereit. Dies ist jedoch eine dem Text gegebene Eigenschaft, die dazu führt, dass der Text im #Container ebenfalls zentriert wird. Daher müssen wir einige zusätzliche Arbeiten am Layout durchführen:
div#container{
Textausrichtung: links;
}
Auf diese Weise kann die Textausrichtung auf den Standardzustand zurückgesetzt werden. Da die Textausrichtung abwärtskompatibel ist und moderne Browser auch adaptive Rahmen unterstützen, kombinieren viele Designer diese, um eine browserübergreifende Verwendung zu erreichen.
Körper{
Textausrichtung: Mitte;
}
#container {
margin-left: auto;
Rand rechts: auto;
Rand: 1 Pixel durchgehend rot;
Breite: 168px;
Textausrichtung: links
}
Leider ist es immer noch nicht perfekt, weil es immer noch ein Hack ist. Sie müssen redundante Regeln für die Textanordnung schreiben. Aber jetzt können wir eine perfektere browserübergreifende Lösung verwenden.
Lösung mit negativer Grenze