Wie man Text vertikal in CSS ausrichtet

Ein Text kann überall leicht hinzugefügt werden, aber ohne Ausrichtung kann er unreduktiv und weniger attraktiv aussehen. Ein nicht ausgerichteter Text kann auch das gesamte Erscheinungsbild einer Webseite stören. Um solche Dinge in Webanwendungen anzugehen, können wir einige nützliche Eigenschaften von CSS verwenden, die Ihnen helfen, Texte in kürzester Zeit auszurichten.

Dieser Artikel zeigt, wie man Text vertikal in CSS ausrichtet.

Wie man Text vertikal in CSS ausrichtet?

In CSS können Sie die folgenden Eigenschaften verwenden, um den Text vertikal auszurichten:

• • Leitungseigenschaft
  • Eigenschaften anzeigen und ausrichten-Items

Lassen Sie uns jetzt jede Methode eins nach dem anderen durchgehen!

Methode 1: Verwenden der Linienhöhe Eigenschaft, um den Text vertikal in CSS auszurichten

Der "Zeilenhöhe”Eigenschaft gibt den Bereich unter und nach oben in den Inline -Elementen an. Es stellt die Entfernung eines Textes von anderen Elementen fest. Mit der Eigenschaft der Linienhöhe kann der Text leicht vertikal mit der Mitte ausgerichtet werden.

Beispiel

Hier ist ein Text in einem Feld (Grenze), der sich derzeit oben links befindet. Richten wir diesen Text vertikal und horizontal auf die Mitte aus:

Fügen Sie dazu einen Container hinzu "”Im Tag der HTML -Datei und geben Sie den erforderlichen Text darin an:

Beste Bildungswebsite!

Die Box wird mit einem "gebildet"3px"Grenze und"250px" Höhe. Der "Schriftgröße"Eigenschaft wird mit dem Wert verwendet"24px”Um die Schriftart sichtbar zu machen. Wir werden Div a zuweisen “Zeilenhöhe" von "250pxUm seinen Text vertikal in der Mitte auszurichten. Als nächstes werden wir das verwenden “TextausrichtungEigentum, um den Text in der Mitte auszurichten:

div
Zeilenhöhe: 250px;
Text-Align: Mitte;
Schriftgröße: 24px;
Höhe: 250px;
Grenze: 3px fest;

Wie Sie sehen können, wurde der Text mithilfe von Zeilenhöhen und horizontal mit der Eigenschaft von Text-Align-Eigenschaften vertikal an der Mitte ausgerichtet und horizontal an der Mitte.

Bewegen wir uns nun auf die nächste Methode.

Methode 2: Verwenden der Eigenschaft Display und Align-Items, um Text vertikal in CSS auszurichten

“FlexboxIst ein eindimensionales Layout, mit dem Sie HTML formatieren können. Sie können es auch verwenden, um die Elemente vertikal oder horizontal auszurichten.

Nehmen wir also ein Beispiel und richten einen Text mit Hilfe der Flexbox vertikal aus.

Beispiel

Zunächst werden wir unseren Container flexibel machen, indem wir den Wert der “festlegenAnzeigeEigentum als "biegen”. Verwenden Sie als nächstes die “AusrichtungEigenschaft zum Einstellen des Inhalts in der Mitte vertikal. Darüber hinaus, um Inhalte in der Mitte horizontal auszurichten, die “RechtfertigungsbekämpfungEigenschaft wird verwendet:

div
Anzeige: Flex;
Ausrichtung: Zentrum;
Justify-Content: Center;
Schriftgröße: 24px;
Höhe: 200px;
Grenze: 3px fest;

Der angegebene Text wurde erfolgreich an die Zentrum ausgerichtet:

Wir haben Methoden im Zusammenhang mit dem Ausrichten von Text vertikal in CSS bereitgestellt.

Abschluss

In CSS kann der Text leicht mit Hilfe des “vertikal ausgerichtet werden“Zeilenhöhe" Eigentum. Sie können auch das verwenden “Flexbox„Für die vertikale Ausrichtung des Textes mit“Anzeige" Und "Ausrichtung" Eigenschaften. Flexbox ist ein eindimensionales Layout und wird einfach für die vertikale oder horizontale Ausrichtung von Elementen verwendet. Dieser Beitrag bot zwei einfachste Methoden, mit denen Sie Text vertikal in CSS ausrichten können.