CSS bietet verschiedene Ausrichtungsstile wie links, rechts, zentral, gerechtfertigt, horizontal und vertikal für verschiedene Arten von Inhalten. Insbesondere für Überschrift und kurze Linien die “CenterDer Ausrichtungsstil wird verwendet. Mit diesem Stil kann das Erscheinungsbild von Inhalten verbessert werden und sieht ordentlich aus.

In diesem Artikel werden verschiedene Methoden erläutert, um den Text vertikal zu zentrieren. So lass uns anfangen!

Wie man Text vertikal in CSS zentriert?

Es gibt viele Möglichkeiten, Text vertikal zu zentrieren, wie z. "Flexbox","Zeilenhöhe","Polsterung","verwandeln", und das "schweben" Eigentum. In diesem Abschnitt erfahren wir einige der genannten Eigenschaften, um den Text vertikal in CSS zu zentrieren. Vorher werden wir jedoch das Verfahren des Zentrum -Ausrichtungstextes zeigen.

Beispiel

In der von HTML erstellen wir einen Container mit der Klasse namens “CenterUnd im Inneren erzeugen Sie eine Überschrift mit Verwendung

Schild:

"Unerwartete Handung"

Wechseln Sie anschließend zur CSS -Datei und stylen Sie die in der HTML -Datei erstellt.

Hier ".Center”Wird verwendet, um auf die Klasse zuzugreifen, die wir dem zugewiesen haben . Als nächstes setzen wir die Breite des erstellten Containers auf “450px"Und die Höhe zu"200px”. Wir setzen auch den Rand der Verwendung der “GrenzeEigentum und den Wert der Grenze zuweisen "10px" Und "doppelt”:

.Center
Breite: 450px;
Höhe: 200px;
Grenze: 7px doppelt;

Nach der Implementierung des obigen Code erhalten wir das folgende Ergebnis:

Hier sehen wir, dass der Text in der oberen linken Ecke des Bildschirms angezeigt wird. Jetzt wechseln wir zum nächsten Schritt, in dem wir verschiedene Methoden beschreiben, um Text mit CSS vertikal zu zentrieren.

Methode 1: Mitte Text vertikal in CSS mit Flex

CSS “biegen"Ist der Wert der"Anzeige" Eigentum. Es wird verwendet, um Inhalte oder Elemente gemäß ihrer Ansichtsfenstergröße festzulegen. Es ermöglicht CSS -Elementen, effizient zu arrangieren, indem der gleiche Platz zwischen ihnen geschaffen wird.

Syntax

Anzeige: Flex

Setzen wir also das vorherige Beispiel fort, um den Text vertikal zu zentralisieren.

Beispiel

Um die Textposition in der Mitte und vertikal festzulegen, werden wir den Wert der Anzeigeeigenschaft als “zuweisenbiegen"Und ausrichten-es als" als "Center”:

.Center
Breite: 450px;
Höhe: 200px;
Grenze: 7px doppelt;
Anzeige: Flex;
Ausrichtung: Zentrum;

Dies gibt uns das folgende Ergebnis:

Hier können wir sehen, dass unser Text vertikal ausgerichtet ist und auch in der Mitte der Div. Jetzt werden wir zur zweiten Methode übergehen.

Methode 2: Mitte Text vertikal in CSS mithilfe der Leitungsheizeigenschaft

Der "ZeilenhöheEigenschaft gibt die Höhe zwischen zwei Linien innerhalb der Elemente an. Es wird verwendet, um Platz zwischen zwei Zeilen mit Text zu schaffen.

Syntax

Die Syntax der Linienhöhe Eigenschaft wird angegeben als:

Zeilenhöhe: Wert

In der oben gegebenen Syntax geben wir die Höhe der Linie als “anWert”.

Notiz: In der Linienhöhe können wir keinen negativen Wert geben.

Beispiel

Jetzt werden wir die Eigenschaft zur Linienhöhe nutzen, um Text in die vertikale Mitte der festzulegen . Setzen Sie dazu den Wert der Linienhöhe in der CSS-Datei auf “auf“150px”:

.Center
Breite: 450px;
Höhe: 200px;
Grenze: 7px doppelt;
Zeilenhöhe: 150px;

Dies gibt uns das folgende Ergebnis:

Methode 3: Mitte Text vertikal in CSS mit Polsterung

Um Platz zwischen dem Rand eines Elements und seinem Inhalt zu schaffen, die “PolsterungEigenschaft wird verwendet. Es ist eine Abkürzungseigenschaft von CSS, die verwendet werden kann, um die Polsterung von allen Seiten in einer einzigen Linie zu setzen.

Syntax

Die Syntax der Padding -Eigenschaft lautet:

Polsterung: oben rechts unten links

Hier ist die Beschreibung der oben gegebenen Werte der genannten Eigenschaft:

• Spitze: Es wird verwendet, um Platz von oben zu schaffen.
• Rechts: Es wird verwendet, um Platz von rechts zu schaffen.
• Taste: Es wird verwendet, um Platz von unten zu schaffen.
• links: Es wird verwendet, um Platz von links zu schaffen.

Notiz: Das Angeben von zwei Werten bedeutet die Polsterung von oben und unten und die Polsterung von links & rechts. Wenn jedoch ein Wert hinzugefügt wird, wird die Polsterung auf alle vier Seiten angewendet.

Beispiel

Hier setzen wir den Wert der Polsterung als "10%" Und "0%”, Wobei der erste Wert die obere und untere Polsterung angibt und der zweite die Polsterung von links und rechts anzeigt. Darüber hinaus möchten wir nur vertikal den Text zentralisieren. Wir werden den zweiten Wert auf “festlegen0”:

.Center
Grenze: 7px doppelt;
Polsterung: 10% 0;

Gehen Sie nach der Implementierung des angegebenen Codes zur HTML -Datei, führen Sie ihn aus und überprüfen Sie die folgende Ausgabe:

Wir haben unterschiedliche Methoden im Zusammenhang mit dem Zentrum der Ausrichtung von Text in CSS bereitgestellt.

Abschluss

Verwenden Sie die “um vertikal zu zentrierenFlexbox","Zeilenhöhe" Und "PolsterungEigenschaften von CSS. Mit diesen Eigenschaften können Sie die Höhe innerhalb des Inhalts- und Elementrandes einstellen. In diesem Artikel erklären wir, wie Sie den Text vertikal mit drei verschiedenen Methoden zentrieren und ein Beispiel für jede Methode angeben.