Komplette Sammlung horizontaler Zentrierlösungen für Elemente_CSS/HTML

Schauen wir uns zunächst einen einfachen XHTML/HTML-Dateicode (Teil) an. Unser Ziel ist es, den #Container horizontal zu zentrieren.

content

Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.

Adaptive Grenzen verwenden ( auto?margin)
Die bevorzugte Methode zum horizontalen Zentrieren eines Elements besteht darin, die Margin-Eigenschaft 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;
margin-right:?auto;
width:?168px;
}
Dieses Schema funktioniert in jedem modernen Browser Alle sind gültig, auch IE6, vorausgesetzt, es befindet sich im Webstandard-Kompatibilitätsmodus (Compliance-Modus). Leider funktioniert es in früheren Versionen von IE/Win nicht. Wir erstellen hierfür eine Tabelle:

Unterstützungsliste für adaptive Grenzen durchsuchen?Browser?Version?Unterstützung?
Internet Explorer 6.0, Compliance-Modus?Ja?
Internet Explorer 6.0, Mackenmodus?Nein?
Internet Explorer 5.5 Windows?Nein?
Internet Explorer 5.0 Windows?Nein?
Internet Explorer 5.2 Macintosh?Ja?
Mozilla Alle aktuellen Versionen?Ja?
Mozilla Firefox?Alle Versionen?Ja?
Netscape? 4.x?Nein?
Netscape?6.x+?Ja?
Opera?6.0,?7.0?Macintosh?und?Windows?Ja?
Safari?1.2?Ja?

Trotz der Einschränkungen der Browserunterstützung empfehlen Ihnen die meisten Designer, dies nach Möglichkeit zu tun. Aber wir können CSS immer noch für alle Situationen verwenden.

Textausrichtung verwenden (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.

body{
text-align:center;
}
Es behandelt alle Browser fair, sehr gründlich 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 noch etwas mehr am Layout arbeiten:

div#container{
text-align:?left;
}
Auf diese Weise kann die Textausrichtung auf den Standardzustand zurückgesetzt werden.

Integrierte Rahmen und Textanordnung
Da die Textanordnung abwärtskompatibel ist, unterstützen moderne Browser auch adaptive Rahmen, und viele Designer kombinieren sie, um eine browserübergreifende Verwendung zu erreichen.

body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
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.

Negative Grenzlösung
Diese Lösung muss mit der absoluten Positionierung (absolute? Positionierung?) kombiniert werden. Positionieren Sie zunächst den #Container absolut und versetzen Sie ihn um 50 % nach links, sodass der linke Rand des #Containers die halbe Seitenauflösung hat. Als nächstes legen Sie den linken Rand des #Containers auf einen negativen Wert fest, der der halben Breite des #Containers entspricht.

#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
position:?absolute;
left:?50%;
width :?760px;
margin-left:?-380px;
}
Sehen Sie, nein?Hacks! Sogar Netscape?4.x unterstützt es!