Detaillierte Erklärung des alternativen Implementierungscodes der vertikalen Zentrierung in CSS (unkonventionell)

Vorwort

Wie wir alle wissen, ist „Wie zentriert man ein Element in CSS vertikal?“ bereits eine häufig gestellte Frage. Es gibt viele Lösungen für dieses Problem. Diese Lösungen haben auch ihre eigenen Anwendungsszenarien sowie Vor- und Nachteile, die ungefähr wie folgt lauten:

• Flexibles Layout
• Rasterlayout
• Tabellenlayout
• Zeilenhöhe mit Höhe
• Position mit Marge
• Position mit Transformation
• ...

Heute werden wir also das Prinzip einer der effektivsten, aber weniger häufig verwendeten Lösungen verstehen. Sie besteht darin, das Pseudoelement :before mit vertical-align:middle zu kombinieren, um eine vertikale Zentrierung der Elemente zu erreichen. Schauen wir uns die spezifische Codeimplementierung an:

<style type="text/css">
  .übergeordnet {
    Anzeige: Inline-Block;
    Breite: 300px;
    Höhe: 300px;
    Schriftgröße: 0;
    Hintergrund: #80848f;
    Textausrichtung: zentriert;
  }
  .übergeordnet:vor {
    Anzeige: Inline-Block;
    Breite: 20px;
    Höhe: 100%;
    Inhalt: '';
    Hintergrund: #ff9900;
    vertikale Ausrichtung: Mitte;
  }
  .Kind {
    Anzeige: Inline-Block;
    Breite: 50px;
    Höhe: 50px;
    Hintergrund: #19be6b;
    vertikale Ausrichtung: Mitte;
  }
</Stil>

<div Klasse="übergeordnet">
  <div Klasse="Kind">Kind</div>
</div>

Das Ergebnis der Ausführung des obigen Codes ist wie folgt:

Ich glaube, jeder kennt den Code bereits, aber verstehen Sie wirklich die Prinzipien dahinter? Als nächstes schauen wir uns Schritt für Schritt an, wie die vertikale Zentrierung erreicht wird.

analysieren

Zunächst müssen wir einen wichtigen Punkt wissen: Die Position der Grundlinie des übergeordneten Elements kann geändert werden, sie ist nicht festgelegt. Das müssen wir uns unbedingt merken. Als Nächstes vereinfachen wir den Code und entfernen die wichtigsten Teile.

<style type="text/css">
  .übergeordnet {
    Anzeige: Inline-Block;
    Breite: 300px;
    Höhe: 300px;
    /* Schriftgröße: 0; */
    Hintergrund: #80848f;
    Textausrichtung: zentriert;
  }
  .übergeordnet:vor {
    Anzeige: Inline-Block;
    Breite: 20px;
    Höhe: 100%;
    Inhalt: '';
    Hintergrund: #ff9900;
    /* vertikale Ausrichtung: Mitte; */
  }
  .Kind {
    Anzeige: Inline-Block;
    Breite: 50px;
    Höhe: 50px;
    Hintergrund: #19be6b;
    /* vertikale Ausrichtung: Mitte; */
  }
</Stil>

<div Klasse="übergeordnet">
  <div Klasse="Kind">Kind</div>
</div>

Nachdem wir font-size:0 und vertical-align:middle auskommentiert haben, sind die laufenden Ergebnisse wie folgt:

Aus der Abbildung ist nicht schwer zu erkennen, dass于:before -Pseudoelement (im Folgenden als Pseudoelement bezeichnet) das Ergebnis dasselbe ist, unabhängig davon, ob vertical-align:middle hinzugefügt wird oder nicht. Es füllt das übergeordnete Element immer in vertikaler Richtung. Beim .child-Element ist die Situation jedoch anders. Seine vertikale Position hat sich geändert. Warum ist das so?
Tatsächlich besteht die Rolle des Pseudoelements hier darin, die Position der Grundlinie des übergeordneten Elements zu ändern (oder neu zu definieren). Sehen wir uns die Definition von vertical-align:middle im MDN-Dokument an.

Mitte: Richtet die Mitte des Elements an der Grundlinie des übergeordneten Elements plus der Hälfte der x-height des übergeordneten Elements aus.

Vergleichen Sie also unser Beispiel:

• Die Mitte des Pseudoelements ist sein vertikaler Mittelpunkt, was nicht schwer zu verstehen ist.
• Wo sich die Grundlinie des übergeordneten Elements befindet, ist uns im Moment egal. Denken Sie nur daran, dass sie geändert werden kann.
• Die Hälfte der x-Höhe, da wir font-size im übergeordneten Element auf 0 gesetzt haben, ist die Hälfte x-height (die Höhe des kleinen x) ebenfalls 0, d. h. keine Höhe

x-height 3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 vertical-align:middle nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber vertical-align:middle nicht font-size x-height :::::::::::

Zusammenfassen

Tatsächlich weist das Prinzip dieser vertikalen Zentriermethode hauptsächlich die folgenden Punkte auf:

• Elemente in CSS werden standardmäßig oben links ausgerichtet
• Die Höhe des Pseudoelements stimmt mit der des übergeordneten Elements überein.
• Das übergeordnete Element setzt die Schriftgröße auf 0, und daher wird auch die x-Höhe auf 0 gesetzt.
• Die Position der Grundlinie des übergeordneten Elements kann geändert werden

Dies ist das Ende dieses Artikels über alternative Implementierungen der vertikalen CSS-Zentrierung. Weitere relevante Inhalte zur vertikalen CSS-Zentrierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!