N Möglichkeiten, Elemente mit CSS zu zentrieren

Vorwort

Ich kann mich noch gut an die Zeit erinnern, als ich zu Beginn meiner Berufstätigkeit von der Fülle an Fragen meines Interviewers völlig gequält wurde. „Wie zentrieren Sie den Text?“ „Was passiert, wenn der Text mehrere Zeilen umfasst?“ „Wie erreichen Sie eine horizontale Zentrierung von Elementen auf Blockebene?“ „Wie erreichen Sie eine vertikale Zentrierung von Elementen auf Blockebene?“ . . Nachdem mir so viele Fragen gestellt worden waren, war mein Kopf völlig durcheinander und ich wusste nicht, wie ich die Fragen beantworten sollte, die ich kannte. Die Zentrierung ist im Berufsalltag ein unvermeidliches Szenario und kommt auch in Vorstellungsgesprächen häufig vor. In diesem Artikel geht es um diese Probleme. Ich hoffe, dass er Studierenden, die dieselben Zweifel haben wie ich damals, hilft, damit sie bei zukünftigen Arbeiten und Interviews mit der Problematik der Zentrierung sicherer umgehen können.

Zentrieren von Inline-Elementen

Text vertikal zentrieren

Eine einzelne Textzeile vertikal zentrieren

Die einfachste Möglichkeit hierfür besteht darin, eine einzelne Textzeile vertikal zu zentrieren: Stellen Sie die Zeilenhöhe auf den gleichen Wert wie die Kastenhöhe ein.
Hier liegt ein Missverständnis vor. Viele Leute legen Höhe und Zeilenhöhe gleich fest, wenn sie eine einzelne Textzeile zentrieren. Tatsächlich ist es nicht nötig, die Höhe festzulegen. Legen Sie einfach die Zeilenhöhe fest. Zu diesem Zeitpunkt wird die Höhe der Box durch die Zeilenhöhe unterstützt, die genau der Zeilenhöhe entspricht.

.Mitte {
  // Sie müssen die Höhe nicht festlegen // height: 20px;
  Zeilenhöhe: 20px;
}

Mehrere Textzeilen vertikal zentrieren
1.vertikale Ausrichtung

Mit vertical-align kann die vertikale Ausrichtung von Inline-Elementen festgelegt werden.

Diese Methode erfordert das Hinzufügen eines zusätzlichen .center-Elements, um den Inhalt zu umschließen, der zentriert werden muss. Stellen Sie die Zeilenhöhe des übergeordneten Elements auf die Höhe des Elements ein und stellen Sie die Anzeige des zentrierten untergeordneten Elements .center auf Inline-Block ein, damit es die Eigenschaften eines Inline-Elements hat. Stellen Sie aufgrund der Vererbung der Zeilenhöhe die Zeilenhöhe auf 20px ein; setzen Sie die Zeilenhöhe des zentrierten untergeordneten Elements zurück und stellen Sie dann vertical-align: middle; ein, um es vertikal in der Mitte des Zeilenfelds auszurichten.

<div Klasse="Box">
 <div Klasse="Mitte">
  Obwohl Sie die Rollen der Passanten A, B, C und D spielen, haben Sie immer noch Leben und Seele.
 </div>
</div>
<Stil>
.Kasten {
 Hintergrundfarbe: orange;
 Zeilenhöhe: 200px;
 Breite: 300px;
}
.Mitte {
 Hintergrundfarbe: grün;
 Zeilenhöhe: 20px;
 Anzeige: Inline-Block;
 vertikale Ausrichtung: Mitte;
}
</Stil>

2.Tabellenzelle
Anders als beim Festlegen von „vertial-align“ für Inline-Elemente, bei dem das aktuelle Element vertikal zentriert wird, werden beim Festlegen von „vertial-align“ für Tabellenzellenelemente dessen untergeordnete Elemente vertikal zentriert. Selbst wenn die untergeordneten Elemente Blockelemente sind, werden sie vertikal ausgerichtet. Diese Methode kann also auch verwendet werden, wenn Sie Blockelemente vertikal zentrieren möchten.

.Kasten {
       Höhe: 200px;
       Anzeige: Tabellenzelle;
       vertikale Ausrichtung: Mitte;
}

Zentrieren Sie die Elemente horizontal

Text-align steuert die horizontale Ausrichtung von Elementen innerhalb einer Unterzeile. Dies ist sehr einfach: Setzen Sie einfach text-align: center.

.Mitte {
       Textausrichtung: zentriert;
}

Blockebenenelemente horizontal zentrieren

Der Randwert von auto kann den gesamten verbleibenden Raum in der entsprechenden Richtung einnehmen. Wenn die Randwerte in beiden horizontalen Richtungen auf auto eingestellt sind, wird der verbleibende Raum gleichmäßig in die beiden Richtungen aufgeteilt, wodurch eine Zentrierung erreicht wird.
Warum verwenden wir diese Methode nie, um eine vertikale Zentrierung zu erreichen? Denn für die Wirksamkeit des Auto-Wertes gibt es eine Voraussetzung, d.h. wenn in der entsprechenden Richtung keine bestimmte Länge eingestellt ist, wird dieser automatisch ausgefüllt. Offensichtlich kann die Breite das übergeordnete Element ausfüllen, die Höhe jedoch nicht.

.Mitte {
 Rand: 0 automatisch;
}

Blockebenenelemente vertikal zentrieren

Können wir margin:auto; verwenden, um eine vertikale Zentrierung zu erreichen? Natürlich können Sie das. Sie können den Fluss der Blöcke ändern, indem Sie den Schreibmodus ändern und sie horizontal fließen lassen. In diesem Fall wird die Höhenrichtung standardmäßig ausgefüllt. Durch die Einstellung margin:auto; können Sie eine vertikale Zentrierung erreichen. Diese Methode hat jedoch Nebeneffekte. Da die Eigenschaft „Schreibmodus“ vererbbar ist, führt sie dazu, dass alle untergeordneten Elemente unter diesem Element ihre Flussrichtung auf horizontal ändern. Auch eine Zentrierung in horizontaler Richtung ist mit dieser Methode nicht mehr möglich.

<div Klasse="Box">
    <div Klasse="Mitte"> 
        Obwohl Sie die Rollen der Passanten A, B, C und D spielen, haben Sie immer noch Leben und Seele.
    </div>
</div>
<Stil>
.Kasten {
 Hintergrundfarbe: orange;
 Höhe: 200px;
 Schreibmodus: vertikal-lr;;
}
.Mitte {
 Hintergrundfarbe: grün;
 Höhe: 50px;
 Rand: automatisch 0;
}
</Stil>

Ist es möglich, mit dieser Funktion sowohl eine vertikale als auch eine horizontale Zentrierung zu erreichen? Ja, das können wir. Lasst uns weiter nach unten schauen.

Horizontale und vertikale Mitte

1.Position (mittleres Element mit fester Breite und Höhe)
Stellen Sie das übergeordnete Element auf absolute Positionierung und das zentrierte Element auf relative Positionierung ein. Die Werte oben, rechts, unten und links sind alle 0. Wenn Sie keine bestimmte Breite und Höhe festlegen, füllt das zentrierte Element das übergeordnete Element sowohl horizontal als auch vertikal aus. Zu diesem Zeitpunkt kann durch Festlegen der spezifischen Breite und Höhe mit margin:auto; eine absolute Zentrierung erreicht werden.

Es ist zu beachten, dass diese Methode nur mit IE8 und höheren Browsern kompatibel ist. Wenn das Projekt mit IE7 kompatibel sein muss, können Sie die folgende Methode verwenden

.Kasten {
 Position: relativ;
}
.Mitte {
 Position: absolut;
 Breite: 200px;
 Höhe: 200px;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Rand: automatisch;
}

2.vertikal ausrichten
Zunächst zentrieren wir das Element horizontal und setzen den Anzeigewert des Elements auf Inline-Clock, sodass es die Eigenschaften eines Inline-Elements hat. Legen Sie „text-align: center“ für das äußere Box-Element fest, um das zentrierte Element horizontal zu zentrieren.
Um dann eine vertikale Zentrierung zu erreichen, müssen Sie ein Hilfselement hinzufügen und die Höhe des Hilfselements auf 100 % festlegen, sodass die Höhe des aktuellen Zeilenfelds das übergeordnete Element ausfüllt, und dann die vertikale Ausrichtung auf „Mitte“ festlegen, um es vertikal mittig auszurichten.

<div Klasse="Box">
    <div Klasse="assist"></div>
    <div Klasse="Mitte"> 
        Obwohl Sie die Rollen der Passanten A, B, C und D spielen, haben Sie immer noch Leben und Seele.
    </div>
</div>
<Stil>
.Kasten {
    Hintergrundfarbe: orange;
    Höhe: 200px;
    Breite: 500px;
    Textausrichtung: zentriert;
}
.Mitte {
    Hintergrundfarbe: grün;
    Breite: 150px;
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
}
.assist {
    Anzeige: Inline-Block;
    Höhe: 100%;
    vertikale Ausrichtung: Mitte;
}
</Stil>

3. Position und Marge
Diese Methode eignet sich für Situationen, in denen die Breite und Höhe des zentrierten Elements bekannt sind. Legen Sie die relative Positionierung des übergeordneten Elements und die absolute Positionierung des zentrierten Elements fest. Die linken und oberen Werte betragen beide 50 %. Die linken und oberen Werte werden relativ zur Breite bzw. Höhe des übergeordneten Elements berechnet. Zu diesem Zeitpunkt befindet sich der obere linke Scheitelpunkt des zentrierten Elements in der Mitte des übergeordneten Elements. Stellen Sie dann den linken und oberen Rand des zentrierten Elements auf die negative Hälfte seiner Breite und Höhe ein, sodass das zentrierte Element in horizontaler Richtung um 50 % seiner Breite nach links und in vertikaler Richtung um 50 % seiner Höhe nach oben versetzt ist, wodurch der Zentriereffekt erzielt wird.

<div Klasse="Box">
    <div Klasse="Mitte"> 
        Obwohl Sie die Rollen der Passanten A, B, C und D spielen, haben Sie immer noch Leben und Seele.
    </div>
</div>
<Stil>
.Kasten {
    Hintergrundfarbe: orange;
    Höhe: 200px;
    Breite: 500px;
    Position: relativ;
}
.Mitte {
    Hintergrundfarbe: grün;
    Breite: 150px;
    Höhe: 50px;
    Position: absolut;
    oben: 50 %;
    links: 50 %;
    Rand links: -75px;
    Rand oben: -25px;
}
</Stil>

4. Position mit Transformation
Die vierte Methode besteht darin, Position mit Transformation zu verwenden. Diese Methode ähnelt im Prinzip der vorherigen, fügt dem Anwendungsszenario jedoch Elemente mit nicht festgelegter Breite und Höhe hinzu. In ähnlicher Weise stellen Sie zunächst die relative Positionierung des übergeordneten Elements, die absolute Positionierung des zentrierten Elements und die linken und oberen Werte auf 50 % ein. Stellen Sie dann die Transformation des mittleren Elements ein: traslate(-50 %, -50 %); der Prozentwert von translate wird relativ zu sich selbst berechnet, sodass das mittlere Element in horizontaler Richtung um 50 % seiner Breite nach links und in vertikaler Richtung um 50 % seiner Höhe nach oben versetzt wird, damit der Zentriereffekt erzielt werden kann.

<div Klasse="Box">
    <div Klasse="Mitte"> 
        Obwohl Sie die Rollen der Passanten A, B, C und D spielen, haben Sie immer noch Leben und Seele.
    </div>
</div>
<Stil>
.Kasten {
    Hintergrundfarbe: orange;
    Höhe: 200px;
    Breite: 500px;
    Position: relativ;
}
.Mitte {
    Hintergrundfarbe: grün;
    Breite: 150px;
    Position: absolut;
    oben: 50 %;
    links: 50 %;
    transformieren: übersetzen(-50 %, -50 %);
}
</Stil>

5.Flex
Wenn Sie keine Rücksicht auf die Kompatibilität mit IE9 und früheren Browsern nehmen müssen, empfiehlt sich am meisten das Flex-Layout.
Stellen Sie das übergeordnete Element auf einen Flex-Container ein und richten Sie die Hauptachse und die Querachse auf die Mitte aus. Relevante Informationen zu Flex finden Sie im Blog von Herrn Ruan, in dem das Thema ausführlich vorgestellt wird.

.Kasten {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}

Damit ist dieser Artikel über N Möglichkeiten zum Zentrieren von Elementen mit CSS abgeschlossen. Weitere Informationen zum Zentrieren von Elementen mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!