Dieser Artikel fasst verschiedene Zentrierungslayoutmethoden mithilfe von CSS zusammen.
In diesem Artikel wird die Situation beschrieben, in der die Zentrierungssituation auf eine variable Gesamtbreite und eine variable Inhaltsbreite eingestellt ist. (Immer noch zentriert, wenn die Größe geändert wird).
Besonderer Hinweis: Wenn Sie position:absolute; für ein Element festlegen, können Sie zusätzlich zur im Blog eingeführten CSS3-Methode auch einen negativen Rand zum Zentrieren verwenden. Dies löst das Kompatibilitätsproblem. aber nur geeignet für Situationen, in denen Breite und Höhe bekannt sind (da ein negativer Versatz die Hälfte der Breite und Höhe des Elements beträgt). Wenn sich Breite und Höhe ändern, gibt es keinen zentrierten Effekt mehr.
Untergeordnete Elemente in diesen Layouts verwenden aufgrund ihrer Attributeinstellungen standardmäßig die Inhaltsbreite.
Alle Zentrierungsbeispiele in diesem Artikel diskutieren nur die Implementierung von CSS. Der HTML-Code ist wie folgt vereinheitlicht:
1 2 3 |
|
1 🎜>
1.1 Inline-Block mit Textausrichtung
1 2 3 4 5 6 |
|
Vorteile: Die Kompatibilität ist sehr gut. Sie müssen nur *display:inline und *zoom:1 im CSS des untergeordneten Elements hinzufügen, um mit IE6 und 7 kompatibel zu sein wird auch horizontal zentriert sein, was die Beseitigung des Aufpralls erfordert.
1.2 Tabelle mit Rand
1 2 3 4 |
|
Vorteile: Die Einstellung ist sehr einfach Nur die Unterelemente müssen so eingestellt werden, dass sie IE8+ und IE6 und 7 unterstützen. Die Unterelemente können durch eine Tabellenstruktur ersetzt werden.
1.3 Absolutwert mit Transformation
1 2 3 4 5 6 7 8 |
|
Vorteile: Das zentrierte Element nicht Arbeiten Sie mit anderen Elementen. Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.
2. Vertikale Zentrierung
2.1 Tabellenzelle mit vertikaler Ausrichtung
1 2 3 4 |
|
Vorteile: Einfach einzurichten, einfach das übergeordnete Element festlegen, kompatibel mit IE8+, wenn Sie mit einer lokalen Version von kompatibel sein müssen Im Browser können Sie p ersetzen. Es handelt sich um eine Tabellenstruktur.
2.2 absolut mit Transformation
1 2 3 4 5 6 7 8 |
|
Vorteile: Das zentrierte Element ist nicht auf andere Elemente ausgerichtet Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.
3. Horizontale + vertikale Zentrierung3.1 Inline-Block mit Textausrichtung plus Tabellenzelle mit vertikaler Ausrichtung
1 2 3 4 5 6 7 8 |
|
Vorteile: Umfassende Umsetzung der ersten beiden Methoden, gute Kompatibilität! Unterstützt IE8+ und ist auch mit Browsern niedrigerer Versionen kompatibel. Nachteile: Die Einrichtung ist komplizierter.
3.2 absolut mit Transformation
1 2 3 4 5 6 7 8 9 |
|
Vorteile: Das zentrierte Element ist nicht auf andere Elemente ausgerichtet Machen Sie eine Wirkung. Nachteile: Die neuen CSS3-Attribute unterstützen IE9+, Browser niedrigerer Versionen unterstützen dies jedoch nicht.
4. All-in-One-Flex
css3 hat neue Layoutattribute, aber die Leistung ist etwas schlecht. Es unterstützt nur IE10+ und wird hauptsächlich auf mobilen Endgeräten verwendet.4.1 Horizontale Zentrierung
1 2 3 4 5 6 7 8 9 |
|
4.2 Vertikale Zentrierung
1 2 3 4 |
|
4.3 Horizontale und vertikale Zentrierung
1 2 3 4 5 6 7 8 9 |
|
Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener zentrierter Layoutmethoden mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!