So zentrieren Sie das Ganze in CSS

Im Allgemeinen wird das Layout des Hauptinhalts von Webseiten im Browser zentriert. Beispielsweise hat die Hauptseite der chinesischen PHP-Website ein zentriertes Layout.

Wie verwende ich CSS, um das gesamte Webseitenlayout zu zentrieren? Was sind die Voraussetzungen für die Layoutzentrierung?

Zuerst müssen wir den CSS-Inhaltszentrierungsstil (css text-align:center) für den Text festlegen und dann margin:0 auto verwenden, wenn wir das äußerste DIV anordnen Das Objektlayout ist zentriert.

Natürlich verwenden wir margin:0 auto für das Box-Objekt. Einige Browser fügen dem Body-Objekt nicht den Stil text-align:center hinzu, und das Layout ist immer noch zentriert Verschiedene Browser sind unterschiedlich. Wenn Sie text-align:center nicht auf den Text festlegen, werden einige Browser-Layouts zentriert und andere auf der linken Seite.

Erklärung: Rand: 0 automatisch, was bedeutet, dass der obere und untere Abstand des Objekts 0 beträgt, der linke und rechte Abstand automatisch erfolgt und der linke und rechte Abstand automatisch entsprechend der Breite des Objekts erfolgt .

Zentrierungsbedingung für das Webseitenlayout

1. Legen Sie den CSS-Inhaltszentrierungsstil text-align:center für den Text fest: body{text-align:center }

2. Legen Sie den margin:0 auto-Stil für das äußerste Objekt fest, Code: .php{margin:0 auto🎜>

Fall:

Um den Layout-Zentrierungseffekt zu beobachten, lautet unser CSS-benanntes Objekt „.php“ und stellt den CSS-Rand auf Schwarz, die CSS-Breite auf 400 Pixel und die CSS-Höhe auf 100 Pixel ein.

1. Der CSS-Code lautet wie folgt:

2. HTML-Code-Snippet:

Das Objekt-PHP-Layout ist zentriert

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Ganze in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!