Ein Text kann überall leicht hinzugefügt werden, aber ohne Ausrichtung sieht er möglicherweise nicht darstellbar und weniger attraktiv aus. 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, mit denen Sie Texte im Handumdrehen ausrichten können.
Dieser Artikel zeigt, wie man Text in CSS vertikal ausrichtet.
Wie kann man Text in CSS vertikal ausrichten?
In CSS können Sie die folgenden Eigenschaften verwenden, um Text vertikal auszurichten:
-
- line-height-Eigenschaft
- display- und align-items-Eigenschaften
Gehen wir nun jede Methode einzeln durch!
Methode 1: Verwenden der line-height-Eigenschaft zum vertikalen Ausrichten von Text in CSS
Das ' Zeilenhöhe ”-Eigenschaft gibt den Bereich unterhalb und oberhalb von Inline-Elementen an. Es legt den Abstand eines Textes zu anderen Elementen fest. Mit der Eigenschaft line-height lässt sich Text einfach vertikal mittig ausrichten.
Beispiel
Hier ist ein Text in einem Feld (Rand), das sich derzeit oben links befindet. Lassen Sie uns diesen Text vertikal und horizontal mittig ausrichten:
Kommen wir nun zur nächsten Methode. „ Flexbox “ ist ein eindimensionales Layout, mit dem Sie HTML formatieren können. Sie können es auch verwenden, um Elemente vertikal oder horizontal auszurichten. Nehmen wir also ein Beispiel und richten einen Text mit Hilfe der Flexbox vertikal aus. Beispiel Zunächst machen wir unseren Container flexibel, indem wir den Wert des „ Anzeige „Eigentum als“ biegen “. Verwenden Sie als Nächstes das „ Ausrichtungselemente ”-Eigenschaft zum vertikalen Setzen des Inhalts in der Mitte. Um Inhalte in der Mitte horizontal auszurichten, muss außerdem das „ rechtfertigen-Inhalt ”-Eigenschaft wird verwendet: In CSS lässt sich Text mit Hilfe des „ Zeilenhöhe ' Eigentum. Sie können auch die „ Flexbox “ für die vertikale Textausrichtung mit “ Anzeige ' und ' Ausrichtungselemente ' Eigenschaften. Flexbox ist ein eindimensionales Layout und dient einfach der vertikalen oder horizontalen Ausrichtung von Artikeln. Dieser Beitrag bot zwei einfachste Methoden, die Ihnen helfen können, Text in CSS vertikal auszurichten.
Fügen Sie dazu einen Container hinzu „
Beste Bildungswebsite !
div >
Die Box wird mit einem „ 3px „Grenze und“ 250px ' Höhe. Das ' Schriftgröße „Eigenschaft wird mit dem Wert verwendet“ 24px “, um die Schrift sichtbar zu machen. Wir weisen div ein „ Zeilenhöhe ' von ' 250px ” zum vertikalen Ausrichten des Textes in der Mitte. Als nächstes verwenden wir das „ Textausrichtung ”-Eigenschaft, um den Text in der Mitte auszurichten:
Zeilenhöhe: 250px;
Textausrichtung: Mitte;
Schriftgröße: 24px;
Höhe: 250px;
Rand: 3px fest;
}
Wie Sie sehen, wurde der Text mit line-height vertikal zur Mitte ausgerichtet und mit der Eigenschaft text-align horizontal zur Mitte. Methode 2: Verwenden der Eigenschaft display und align-items zum vertikalen Ausrichten von Text in CSS
Anzeige: biegen ;
Ausrichtungselemente: Mitte;
justify-content: center;
Schriftgröße: 24px;
Höhe: 200px;
Rand: 3px fest;
}
Der angegebene Text wurde erfolgreich zentriert ausgerichtet:
Wir haben Methoden zum vertikalen Ausrichten von Text in CSS bereitgestellt. Fazit