Div+CSS-Tutorial: Zusammenfassung der Methoden zum Erreichen der horizontalen Zentrierung von Div-Containern

Das Seitenlayout in Webstandards wird mithilfe von Div und CSS implementiert. Am häufigsten wird der Effekt der horizontalen Zentrierung der gesamten Seite verwendet. Dies ist das Grundwissen im Seitenlayout und das Wissen, das zuerst beherrscht werden sollte. Diese Frage wird jedoch immer noch häufig gestellt. Hier werde ich kurz die Methode zur Verwendung von Div und CSS zur horizontalen Zentrierung der Seite zusammenfassen:

1. margin:auto 0 und text-aligh:center

werden in modernen Browsern (z. B. im Internet) verwendet (Explorer 7, Firefox, Opera usw.) Die Methode zur horizontalen Zentrierung in modernen Browsern ist sehr einfach: Stellen Sie einfach den linken und rechten Rand auf „Automatisch“ ein. Bedeutung:
#wrap { margin:0 auto;}
Der obige Code bedeutet, dass der Abstand zwischen dem Wrap-Div und der linken und rechten Seite automatisch festgelegt wird, wobei der obere und untere Wert 0 sind (kann beliebig sein). Bitte führen Sie den aktuellen Code in einem modernen Browser aus (z. B. Internet Explorer 7, Firefox, Opera usw.):
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

 div#wrap {
 Breite:760px;
 margin:0 auto; /*0 kann hier ein beliebiger Wert sein*/
 border:1px solid #ccc;
 Hintergrundfarbe:#999;
 }
 

Das Obige funktioniert sehr gut. Dies funktioniert jedoch nicht in Internet Explorer 6 und höher, aber zum Glück gibt es eine eigene Problemumgehung. In Internet Explorer ist das text-align-Attribut vererbbar, d. h. nachdem es im übergeordneten Element festgelegt wurde, verfügt es standardmäßig über dieses Attribut im untergeordneten Element. Daher können wir den text-align-Attributwert im Body-Tag auf „center“ setzen, sodass alle Elemente auf der Seite automatisch zentriert werden. Gleichzeitig müssen wir auch einen Hook hinzufügen, um den Text auf der Seite zu ändern So wie wir es gewohnt sind zu lesen: linksbündig. Also müssen wir den Code so schreiben:
Körper {text-align:center;}
#wrap {text-align:left;}
Auf diese Weise können wir leicht eine zentrierte Ausrichtung von Div im Internet Explorer erreichen. Um den Zentrierungseffekt in allen Browsern anzuzeigen, können wir unseren Code daher wie folgt schreiben:
body { text-align:center }
#wrap { text-align:left;
Rand:0 automatisch;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

 div#wrap {
 Breite:760px;
 margin:0 auto; /*0 kann hier ein beliebiger Wert sein*/
 border:1px solid #ccc;
 Hintergrundfarbe:#999;
 }
 Im Internet Explorer 6 und niedriger müssen wir außerdem folgende Einstellungen vornehmen:
 body { text-align:center }
 div#wrap {
 text-align:left;
 }
 

Hier gilt jedoch eine Voraussetzung, dass das zentrierte Element eine feste Breite haben muss. Hier stellen wir es beispielsweise auf 760 Pixel ein.

2. Relative Positionierung und negative Ränder

Führen Sie eine relative Positionierung für den Umbruch durch und verwenden Sie dann negative Ränder, um den Versatz auszugleichen. Diese Methode ist relativ einfach und leicht zu implementieren:

#wrap {
Position:relativ;
Breite:760px;
links:50 %;
Rand links: -380px
}
Die Bedeutung dieses Codes besteht darin, die Positionierung von Wrap relativ zum Body-Tag seines übergeordneten Elements festzulegen und dann seinen linken Rand in die Mitte der Seite zu verschieben (d. h. die Bedeutung von left:50 %). Bewegen Sie es von der Mittelposition nach links. Versetzen Sie es um die Hälfte zurück, sodass es horizontal zentriert ist.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

 div#wrap {
 Position:relativ;
 Breite:760px;
 links:50 %;
 margin-left:-380px;
 Grenze:1px durchgezogen #333;
 Hintergrundfarbe:#ccc;
 }
 

Ebenso müssen Sie eine feste Breite festlegen, bevor Sie die horizontale Zentrierung festlegen.

Welche Methode soll ich wählen?
Welche der beiden oben genannten Methoden ist besser? Die erste Methode scheint die Hack-Technologie zu verwenden, ist jedoch keine recht zufriedenstellende Web-Standard-Schreibmethode und entspricht vollständig den Spezifikationen. Daher können Sie eine der beiden Methoden zur Verwendung auswählen ist ein CSS-Hack-Problem.

3. Andere Zentriermethoden Die

oben genannten sind alle Implementierungen der horizontalen Zentrierung, wenn eine bestimmte Breite eingestellt ist. Manchmal möchten wir ein flexibles Layout erstellen, oder wenn sich ein Element in einem Container befindet, möchten wir, dass es einfach zentriert ist und keine bestimmte Breite festlegen. Tatsächlich ist dies kein wirklich zentriertes Layout. Würden Sie sagen, dass ein Element mit 100 % Länge zentriert oder linksbündig ist? Jede Zentrierung ohne Höhe und Breite ist also keine echte Zentrierung. Wir legen dieses Design mithilfe der Auffüllung des Elements fest. Tatsächlich ändern wir die Containergröße des übergeordneten Elements:
Wenn wir möchten, dass sich die Länge des Wrap-Elements mit dem Fenster ändert und gleichzeitig die Mitte beibehält, können wir so schreiben:
Körper {
Polsterung: 10px 150px;
}
Hier müssen wir nur die Polsterung auf der linken und rechten Seite des übergeordneten Elements gleich halten.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

 Körper {
 Polsterung: 10px 150px;
 }
 Hier müssen wir nur die Polsterung auf der linken und rechten Seite des übergeordneten Elements gleich halten.
 

Natürlich scheint dies nur „zentriert“ zu sein, aber es ist oft sehr nützlich.