Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Beim Entwerfen einer Seite müssen wir das DIV häufig zentrieren und es horizontal und vertikal relativ zum Seitenfenster zentrieren, beispielsweise beim Zentrieren des Anmeldefensters.

Bisher wurden viele Methoden erforscht.

HTML:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >   
  2.      < div   Klasse = "maxbox" >   
  3.          < div   Klasse = "Minbox ausrichten-zentrieren" > </ div >   
  4.      </div>​​   
  5. </ Körper >   
  6.   

Wirkungsdiagramm (die folgenden Methoden haben das gleiche Wirkungsdiagramm):

Die erste: Absolute Positionierung in CSS

Verwenden Sie hauptsächlich die absolute Positionierung und passen Sie sie dann mithilfe des Rands an die mittlere Position an.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      links : 50 %;
  4.      oben : 50 %;
  5.      Rand links : - 100px ; /*Breite/-2*/   
  6.      Rand oben : – 100px ; /*Höhe/-2*/   
  7. }

Die zweite Methode: CSS-absolute Positionierung + Javascript/JQuery

Verwenden Sie hauptsächlich die absolute Positionierung und passen Sie sie dann mit Javascript/JQuery an die mittlere Position an. Im Vergleich zur ersten Methode verbessert diese Methode die Flexibilität der Klasse.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      links : 50 %;
  4.      oben : 50 %;
  5. }
  6.   

JQuery:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. $( Funktion () {
  2. $( ".align-center" ).css(
  3. {
  4.              "Rand links" : ($( ".align-center" ).width()/-2),
  5.              "Rand oben" : ($( ".align-center" ).Höhe()/-2)
  6. }
  7. );
  8. });
  9.   

Der dritte Typ: CSS3 absolute Positionierung + Verschiebung

Derselbe Effekt kann durch die Verwendung der absoluten Positionierung und der Funktion „transform: translate“ von CSS3 erzielt werden.

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .minbox{
  2.      Breite : 200px ;
  3.      Höhe : 200px ;
  4. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  5. }
  6.   

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Position : absolut ;
  3.      oben : 50 %;
  4.      links : 50 %;
  5. -webkit-transform: übersetzen(-50 %, -50 %);
  6. -moz-transform: übersetzen(-50 %, -50 %);
  7. transform: translate(-50%, -50%); /*Nach links und oben bewegen*/   
  8. }
  9.   

Viertens: Flexbox: [Flexibles Layout-Box-Modell]

Mit dem Flexbox-Modell ist es zu einfach, Elemente horizontal und vertikal zu erstellen.

Hier müssen wir das HTML ändern:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Maxbox Align-Center" >   
  2.      < div   Klasse = "minbox" > </ div >   
  3. </div>​​   
  4.   

Übergeordnetes Element:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .maxbox{
  2.      Position : relativ ;
  3.      Breite : 500px ;
  4.      Höhe : 500px ;
  5.      Rand : 5px ;
  6. Kastenschatten: 1px   1 Pixel   1px rgba(0, 0, 0, 0,8), - 1px - 1px   1px rgba(0, 0, 0, 0,8);
  7. }
  8.   

Untergeordnete Elemente:

C#-Code zum Kopieren von Inhalten in die Zwischenablage
  1. .minbox{
  2. Breite: 200px;
  3. Höhe: 200px;
  4. Kastenschatten: 1px 1px 1px rgba(0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
  5. }

Horizontale und vertikale Zentrierung:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .align- center {
  2.      Anzeige : Flex;
  3.      Anzeige : -webkit-flex; /*Kompatibilitätsproblem*/   
  4.      ausrichten - Inhalt : zentriert ;
  5. Elemente ausrichten: zentriert ;
  6. }

Vergleich mehrerer Methoden:

Der erste Typ der absoluten CSS-Positionierungsrandanpassung weist eine gute Kompatibilität auf, es fehlt ihm jedoch an Flexibilität. Wenn viele Boxen horizontal und vertikal zentriert werden müssen, sollten aufgrund ihrer unterschiedlichen Breiten und Höhen unterschiedliche .align-center-Befehle geschrieben werden.
Die zweite verwendet eine Skriptsprache, die eine gute Kompatibilität aufweist und die Mängel der ersten ausgleicht. Die horizontale und vertikale Zentrierwirkung wird durch Breiten- und Höhenänderungen nicht beeinflusst.
Die dritte verwendet einige neue Eigenschaften von CSS3 und ist mit IE10, Chrome, Firefox und Opera kompatibel. Die Kompatibilität ist nicht sehr gut und die horizontalen und vertikalen Zentriereffekte werden durch Änderungen der Breite und Höhe nicht beeinflusst.
Durch die Verwendung des Flexbox-Modells ist es mit Firefox, Opera und Chrome kompatibel, der IE ist jedoch völlig im Nachteil. Die horizontale und vertikale Zentrierwirkung wird durch Breiten- und Höhenänderungen nicht beeinflusst.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

<<:  MySQL-Abfrageanweisung nach Zeit gruppiert

>>:  Klassischer Beispielcode für JavaScript-Funktionsaufrufe

Artikel empfehlen

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern

Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....

Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing

Inhaltsverzeichnis 1. Funktionseinführung 2. Schl...

Sammlung von 25 Schriftarten, die in berühmten Website-Logos verwendet werden

In diesem Artikel sind die Schriftarten zusammeng...

12 Gesetze des Webdesigns für sauberen Code [Grafik]

Schöner Code ist die Grundlage einer schönen Websi...

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

1. Konzept Sie alle sind Attribute des Elements u...

Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10

Installation, Konfiguration, Start, Anmeldung und...

Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular

Ausrichtungsprobleme wie type="radio" un...

Detaillierte Erläuterung der Grundkonfiguration des automatisierten Testens von Vue-Jest

Inhaltsverzeichnis Installieren Konfiguration Häu...

Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL

In MySQL können alle Felder der Typen char, varch...

Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF

Technologie nutzen itext.jar: Konvertiert den Byt...

So implementieren Sie eine geplante Sicherung der CentOS MySQL-Datenbank

Das folgende Skript wird für die geplante Sicheru...

Optimierung des MySQL Thread_Stack-Verbindungsthreads

MySQL kann nicht nur über das Netzwerk, sondern a...

MySQL-Optimierung: Cache-Optimierung (Fortsetzung)

In MySQL gibt es überall Caches. Wenn ich den Que...

Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus

Lebenszyklusklassifizierung Jede Komponente von V...