Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout

Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout
Die Eigenschaft, Text in CSS zu zentrieren, lässt sich sehr einfach erreichen, indem Sie „text-align:center“ festlegen. Das „Element“, von dem ich hier spreche, bezieht sich eigentlich auf den Container. Wenn Sie eine passendere Bezeichnung wünschen, sollte es durch div dargestellt werden.
Ich glaube, dass viele Webdesigner mit der Idee vertraut sind, Elemente horizontal zu zentrieren. Aber manchmal frage ich mich, warum wir Elemente horizontal zentrieren sollten? Was ist der Grund? Dies sind nur einige meiner eigenen Meinungen, die ich niedergeschrieben habe …

Um die Elemente horizontal zu zentrieren, müssen Sie zunächst die Konzepte des festen und des fließenden Layouts im CSS-Design verstehen. Der intuitive Unterschied zwischen ihnen besteht darin, ob für das Element eine Breite festgelegt ist. Nachfolgend finden Sie zwei Codeausschnitte, die den Unterschied zwischen festem Layout und Flusslayout einfach veranschaulichen.
1. Demo mit festem Layout:

Code kopieren
Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Position-Layout</title>
<style type="text/css">
.wrapper{width:750px;position:relative;margin:0 auto;text-align:left;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="contentArea"></div>
<div Klasse="leftPanel"></div>
<div Klasse="rightPanel"></div>
</div>
</body>
</html>

2. Flow-Layout-Demo:

Code kopieren
Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Titel>Spalten3-Rand-Layout</Titel>
<style type="text/css">
.contentArea{margin:0 160px;height:500px;background:#96c;}
.leftPanel{width:150px;float:left;height:500px;background:#999;}
.rightPanel{width:150px;float:right;height:500px;background:#06C;}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="leftPanel"></div>
<div Klasse="rightPanel"></div>
<div Klasse="contentArea"></div>
</div>
</body>
</html>

Aus den beiden obigen Beispielen können wir schließen, dass es unmöglich ist, Elemente in einem Flusslayout horizontal zu zentrieren, da sie alle im Vollbildmodus angezeigt werden. Nur bei einem festen Layout ist aufgrund der begrenzten Breite eine horizontale Zentrierung der Elemente möglich.
Zweitens erfordert die Implementierung eines festen Layouts nicht unbedingt, dass die Elemente horizontal zentriert sind. Der Grund dafür besteht darin, dass auf beiden Seiten des Browsers ein gleichmäßiger Rand möglich ist, anstatt auf einer Seite einen großen Leerraum zu haben, der das Erscheinungsbild beeinträchtigt.
Dies sind alles einfache Kenntnisse. Lassen Sie uns in das Thema einsteigen.
============================================================================
Es gibt drei Möglichkeiten, ein Element horizontal zu zentrieren, und ich werde sie nacheinander vorstellen. wie folgt :
1. Automatische Margenmethode .
Dies ist die Methode, mit der Webdesigner am besten vertraut sind. Dabei müssen die Breite des Containers und der Rand festgelegt werden: automatischer Stil. Hier ist ein Codeausschnitt:

Code kopieren
Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Position-Layout</title>
<style type="text/css">
.wrapper{width:750px;margin:0 auto;position:relative;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="contentArea"></div>
<div Klasse="leftPanel"></div>
<div Klasse="rightPanel"></div>
</div>
</body>
</html>

Durch diesen Code können wir feststellen, dass diese Methode in verschiedenen gängigen Browsern (einschließlich IE6) gut angezeigt werden kann. Nur in Versionen unter IE6 funktioniert sie nicht und die Elemente sind immer noch links angeordnet. Wenn Sie das Problem einer niedrigen Browserversion nicht berücksichtigen, ist dies am bequemsten.
2. Kombinieren Sie Textzentrierung und automatische Ränder .
Diese Methode kann das Problem lösen, dass Versionen unter IE6 margin:0 auto nicht unterstützen. Sie wird verwendet, um den Stil text-align:center im Text festzulegen. Der spezifische Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Position-Layout</title>
<style type="text/css">
Textkörper {Textausrichtung: Mitte;}
.wrapper{width:750px;position:relative;margin:0 auto;text-align:left;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="contentArea"></div>
<div Klasse="leftPanel"></div>
<div Klasse="rightPanel"></div>
</div>
</body>
</html>

Hier wird text-align:center als CSS-Hack verwendet, weil es ein Textstil ist und im Textkörper verwendet wird, um den Stil der Zentrierung des Elements zu erreichen und dabei etwas zu tun, was es nicht tun sollte ...
3. Methode der negativen Marge .
Die Implementierung dieser Methode ist komplizierter als die beiden vorherigen. Es muss in Verbindung mit der Positionierung verwendet werden. Der spezifische Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>negativer-Rand-Element-Mitte</title>
<style type="text/css">
.wrapper{width:750px;position:relative;left:50%;margin-left:-375px;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="contentArea"></div>
<div Klasse="leftPanel"></div>
<div Klasse="rightPanel"></div>
</div>
</body>
</html>

Verschieben Sie den Container zunächst um 50 % nach rechts relativ zum Dokument. Setzen Sie dann den linken Rand des Containers auf die negative Hälfte der Containerbreite, um eine horizontale Zentrierung des Elements zu erreichen. Diese Methode weist keine Hacks auf und ist äußerst kompatibel, sodass sie in den meisten Browsern konsistent funktioniert.
Dies sind die drei mir bekannten Methoden, um Elemente horizontal zu zentrieren. Sie sind alle relativ einfach, daher werde ich sie als Wiederholung und Zusammenfassung Ihres Wissens aufschreiben.

<<:  CSS füllt das übergeordnete Container-Div mit img-Bildern und passt sich der Containergröße an

>>:  MySQL lernen, Datenbanken und Tabellen-DDL zu erstellen und zu bedienen für Anfänger

Artikel empfehlen

Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue

Inhaltsverzeichnis 1. Richtlinie Zollrichtlinie 2...

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Einführung von zwei Methoden zum Anzeigen von MyS...

Detaillierte Erklärung zum Erstellen gespeicherter Prozeduren und Funktionen in MySQL

Inhaltsverzeichnis 1. Gespeicherte Prozedur 1.1. ...

Welche Ähnlichkeiten gibt es zwischen der Entwicklung des Webdesigns und der westlichen Architektur?

Die Geschichte wiederholt sich immer überraschend...

Ein Leistungsfehler bei MySQL-Partitionstabellen

Inhaltsverzeichnis 2. Stapelanalyse mit pt-pmap 3...

So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird

1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...

Sprungcode für HTML-Seite

Speichern Sie den folgenden Code als Standard-Home...

Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können

Ich habe kürzlich an einer Popup-Anzeige gearbeite...

Installationsschritte und Tutorial zur grundlegenden Verwendung von MySQL 8.0.12 unter Windows

In diesem Artikel werden die Installationsschritt...

Drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Domänennamen)

Nginx unterstützt drei Möglichkeiten zum Konfigur...

Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)

Vorwort Apropos Textsuchtools: Jeder sollte grep ...

Natives JS zum Erzielen eines funkelnden Sterneneffekts

In diesem Artikelbeispiel wird der spezifische Co...

MySQL 5.7.21 Installations- und Konfigurations-Tutorial unter Windows 10

Dieser Artikel zeichnet die Installations- und Ko...

Detaillierte Beispiele zur Konvertierung von Zeilen in Spalten und Spalten in Zeilen in MySQL

MySQL Zeile zu Spalte, Spalte zu Zeile Der Satz i...

Erweiterte MySQL-Datenbankabfrage und Mehrtabellenabfrage

MySQL-Abfrage für mehrere Tabellen Hinzufügen ein...