Analyse des Prinzips der Zentrierung von Elementen mit CSS

Es ist eine sehr häufige Anforderung, die horizontale und vertikale Mitte eines Elements in CSS festzulegen. Doch obwohl die Umsetzung in der Theorie äußerst einfach erscheint, sind viele Menschen in der Praxis oft ratlos.

Das horizontale Zentrieren eines Elements ist relativ einfach: Wenn es ein Inline-Element ist, wenden Sie „text-align: center“ auf das übergeordnete Element an. Wenn es ein Blockelement ist, wenden Sie „margin: auto“ auf sich selbst an.

Wenn Sie jedoch ein Element vertikal zentrieren möchten, ist dies nicht so einfach und manchmal kann Ihnen allein der Gedanke daran ein taubes Gefühl im Kopf bescheren.

In diesem Artikel werden Inline-Elemente bzw. Block-Level-Elemente erläutert, die derzeit gängigen Implementierungsmethoden zusammengefasst und die Implementierungsprinzipien zu Ihrer Information analysiert. Dabei ist zu beachten, dass keine Methode perfekt ist. Der Schlüssel liegt darin, die eigenen Bedürfnisse zu betrachten und zu analysieren, welche Implementierungsmethode am besten geeignet ist.

Inline-Elemente

Schreiben wir zunächst den Basiscode:

<div Klasse="Haupt">
    <span class="content">Ich möchte das Inline-Element span zentrieren</span>
</div>

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
}

.Inhalt {
    Hintergrundfarbe: #5b4d4e;
    Farbe: #FFFFFF;
}

Das Div mit der Klasse .main umschließt das Inline-Element span mit der Klasse .content. Unser Ziel ist es, das .content-Element im .main-Element zu zentrieren.

Horizontale Mitte

Textausrichtung

Es ist relativ einfach, Inline-Elemente horizontal zu zentrieren. Wir können einfach text-align: center; zu .main hinzufügen. Jetzt wird .main zu:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
    
    text-align: center; /* Horizontal zentriert */
}

Implementierungsprinzip: Setzen Sie den Wert von „text-align“ auf „center“, da dieses Attribut die horizontale Ausrichtung des Textes in einem Element angibt. Wenn es also auf „center“ gesetzt ist, wird der Text horizontal zentriert.

Vertikale Mitte

Zeilenhöhe

Die vertikale Zentrierung von Inline-Elementen erklärt sich durch die Aufteilung in eine Zeile und mehrere Zeilen bzw. ersetzte Elemente wie Bilder.

Wenn es sich um eine Zeile handelt, können wir dies mit der Zeilenhöhe erreichen. Zu diesem Zeitpunkt lautet der CSS-Code des .main-Elements:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px; /* optional*/
    Hintergrundfarbe: #50ba8b;

    Zeilenhöhe: 300px; /* vertikal zentriert */
}

Tatsächlich kann durch Festlegen der Zeilenhöhe der Text vertikal zentriert werden, ohne dass gleichzeitig die Höhe festgelegt werden muss. Dies ist auch ein Missverständnis, das schon immer bestand.

Implementierungsprinzip: Diese Methode erreicht eine vertikale Zentrierung durch Verwendung des „gleichmäßigen Aufteilungsmechanismus des Zeilenabstands“ in CSS, was auch erklärt, warum diese Methode nur auf eine Textzeile anwendbar ist.

Ein weiterer Punkt, der erklärt werden muss, ist, dass die auf diese Weise erreichte vertikale Zentrierung „ungefähr“ und nicht perfekt ist, da die vertikale Mittellinie des Textglyphs im Allgemeinen niedriger ist als die vertikale Mittellinie des tatsächlichen „Zeilenfelds“ und da die von uns normalerweise verwendete Schriftgröße relativ klein ist, ist diese Abweichung nicht leicht zu erkennen und wird daher als vertikale Zentrierung wahrgenommen.

Zeilenhöhe und vertikale Ausrichtung

Als nächstes sprechen wir darüber, wie man eine vertikale Zentrierung von Ersatzelementen wie mehreren Zeilen oder Bildern erreicht. Hier müssen wir sowohl die Zeilenhöhe als auch die vertikale Ausrichtung verwenden, um dies zu erreichen.

Umbrechen Sie zunächst den Text:

<div Klasse="Haupt">
    <span class="Inhalt">
        Ich möchte das Inline-Element span zentrieren <br>
        Ich möchte den Inline-Elementbereich zentrieren
    </span>
</div>

Schauen Sie sich den geänderten CSS-Code an:

.hauptsächlich {
    Breite: 300px;
    Hintergrundfarbe: #50ba8b;

    Zeilenhöhe: 300px;
}

.Inhalt {
    Anzeige: Inline-Block;
    Hintergrundfarbe: #5b4d4e;
    Farbe: #FFFFFF;
    Zeilenhöhe: 20px;
    Rand: 0 20px;
    vertikale Ausrichtung: Mitte;
}

Umsetzungsprinzip:

• Stellen Sie die Anzeige des .content-Elements auf Inline-Block ein. Seine Funktion besteht darin, die externe Zeilenhöhe unter Beibehaltung der Eigenschaften der Inline-Elemente auf eine normale Größe zurückzusetzen, sodass das Attribut „Vertical-Align“ festgelegt und eine sehr kritische „Zeilenbox“ generiert werden kann. Was wir eigentlich brauchen, ist nicht diese „Zeilenbox“, sondern ein Produkt, das mit jeder „Zeilenbox“ einhergeht – ein „Ghost Blank Node“, also ein unsichtbarer „Knoten“ mit einer Breite von 0, der sich wie ein gewöhnliches Zeichen verhält. Mit diesem „Ghost Blank Node“ verfügt unser „line-height: 300px;“ über ein Objekt, auf das eingewirkt werden kann. Dies entspricht dem Aufstellen eines Inline-Elements mit einer Höhe von 300 Pixeln und einer Breite von 0 vor dem „.content“-Element.
• Da Inline-Elemente standardmäßig an der Grundlinie ausgerichtet sind, passen wir die vertikale Position mehrerer Textzeilen an, indem wir „vertical-align: middle;“ auf dem .content-Element festlegen, um den gewünschten „vertikalen Zentrierungs“-Effekt zu erzielen. Diese Methode eignet sich auch für den vertikalen Zentriereffekt von ersetzten Elementen wie beispielsweise Bildern. Natürlich ist die „vertikale Zentrierung“ hier auch ungefähr, was durch die vertikale Ausrichtung verursacht wird. Aus den spezifischen Gründen können Sie mehr über vertikale Ausrichtung erfahren: Mitte;.

Elemente auf Blockebene

Schreiben Sie dennoch zunächst den Basiscode:

<div Klasse="Haupt">
    <div class="content">Ich möchte das Block-Level-Div zentrieren</div>
</div>

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
}

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;
}

Das Div mit der Klasse .main umschließt das Block-Level-Div mit der Klasse .content. Unser Ziel ist es, das .content-Element im .main-Element zu zentrieren.

Position + Rand: automatisch

Der Implementierungscode lautet wie folgt:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
    
    /*Schlüsselcode*/
    Position: relativ;
}

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;

    /*Schlüsselcode*/
    Position: absolut;
    oben: 0;
    links: 0;
    unten: 0;
    rechts: 0;
    Rand: automatisch;
}

Umsetzungsprinzip:

1. Stellen Sie das .main-Element auf die relative Positionierungsposition „position: relative;“ ein, sodass seine untergeordneten Elemente bei absoluter Positionierung relativ dazu sind.
2. Stellen Sie dann das .content-Element auf die absolute Positionierungsposition ein: absolut; und setzen Sie oben, links, unten und rechts auf 0. Auf diese Weise wird die Größe des Elements als „formatierte Breite und formatierte Höhe“ ausgedrückt, was der „normalen Flussbreite“ von <div> entspricht. Es gehört zur externen Größe, d. h. die Größe füllt automatisch die verfügbare Größe des übergeordneten Elements aus. Da wir jedoch zu diesem Zeitpunkt die Breite und Höhe des .content-Elements festlegen, wird das Element nicht automatisch ausgefüllt, sodass zusätzliche 150 Pixel Platz vorhanden sind.
3. Schließlich setzen wir das .content-Element auf margin: auto;. Zu diesem Zeitpunkt wird gemäß den Berechnungsregeln von auto der verbleibende Raum oben, unten, links und rechts gleichmäßig aufgeteilt, sodass er natürlich zentriert ist.

Position + Rand links/oben

Der Implementierungscode lautet wie folgt:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
    
    /*Schlüsselcode*/
    Position: relativ;
}

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;

    /*Schlüsselcode*/
    Position: absolut;
    oben: 50 %;
    links: 50%;
    Rand links: -75px;
    Rand oben: -75px;
}

Umsetzungsprinzip:

1. Stellen Sie das .main-Element auf die relative Positionierungsposition „position: relative;“ ein, sodass seine untergeordneten Elemente bei absoluter Positionierung relativ dazu sind.
2. Stellen Sie dann das .content-Element auf die absolute Positionierungsposition „position: absolute“ ein und setzen Sie „top: 50 %;, left: 50 %;“, sodass sich die obere linke Ecke des .content-Elements in der Mitte des .main-Elements befindet.
3. Stellen Sie abschließend den linken Rand des .content-Elements auf -75px; und den oberen Rand auf -75px; so ein, dass es sich um die Hälfte seiner Breite und Höhe nach links und oben verschiebt. Auf diese Weise befindet sich die Mitte des .content-Elements in der Mitte des .main-Elements, wodurch der Zentrierungseffekt auf natürliche Weise erzielt wird.
4. Der Nachteil dieser Methode besteht darin, dass die Breite und Höhe des .content-Elements festgelegt sein müssen.

positionieren + übersetzen

Der Implementierungscode lautet wie folgt:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;
    
    /*Schlüsselcode*/
    Position: relativ;
}

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;

    /*Schlüsselcode*/
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
}

Umsetzungsprinzip:

1. Stellen Sie das Element .main auf die relative Positionierungsposition „position: relative;“ ein, sodass seine untergeordneten Elemente bei absoluter Positionierung relativ dazu sind.
2. Stellen Sie dann das .content-Element auf die absolute Positionierungsposition „position: absolute“ ein und setzen Sie „top: 50 %;, left: 50 %;“, sodass sich die obere linke Ecke des .content-Elements in der Mitte des .main-Elements befindet.
3. Legen Sie abschließend das .content-Element „transform: translate(-50%, -50%)“ fest, um es um die Hälfte seiner Breite und Höhe nach links und oben zu verschieben, sodass sich die Mitte des .content-Elements in der Mitte des .main-Elements befindet und so auf natürliche Weise der Zentrierungseffekt erzielt wird.
4. Der Vorteil dieser Methode besteht darin, dass keine feste Breite und Höhe für das .content-Element erforderlich ist.

Flexbox

Der Implementierungscode lautet wie folgt:

.hauptsächlich {
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: #50ba8b;

    /*Schlüsselcode*/
    Anzeige: Flex;
}

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;

    /*Schlüsselcode*/
    Rand: automatisch;
}

Umsetzungsprinzip:

• Legen Sie die Anzeige des Hauptelements fest: flex;.
• Setzen Sie dann das .content-Element auf margin: auto;, um eine Zentrierung zu erreichen.
• Dies ist zweifellos die beste Lösung. Wir müssen das .content-Element nicht auf absolute Positionierung einstellen, margin: auto kann natürlich mit der Breite und Höhe arbeiten, und wir müssen die Breite und Höhe des .content-Elements nicht einstellen, da Flexbox speziell für diese Art von Bedarf entwickelt wurde.
• Der Nachteil besteht darin, dass die aktuelle Browserunterstützung geringer ist als bei anderen Methoden.

Ein weiterer Vorteil von Flexbox besteht darin, dass es auch anonyme Container (d. h. Textknoten, die nicht von Tags umschlossen sind) vertikal zentrieren kann. Anstatt beispielsweise das .main-Element auf „display: flex;“ einzustellen, können wir das .content-Element auf „display: flex;“ einstellen und mithilfe der von der Flexbox-Spezifikation eingeführten Eigenschaften „align-items“ und „justify-content“ den Text darin auch zentrieren (wir können dieselben Eigenschaften auf dem .main-Element verwenden, um das .content-Element zu zentrieren, aber das ist eleganter als die Methode „margin: auto“ und dient auch als Fallback).

.Inhalt {
    Breite: 150px;
    Höhe: 150px;
    Hintergrundfarbe: #5b4d4e;

    /*Schlüsselcode*/
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Rand: automatisch;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.