Dieser Artikel zeigt, wie Sie Text in einer Flexbox vertikal ausrichten:
Methode 1: Verwenden der „align-item“-Eigenschaft
Um Text vertikal auszurichten, können Benutzer das „ Ausrichtungselement ”-Eigenschaft, die von CSS bereitgestellt wird. Es hilft den Elementen, ihre Ausrichtung innerhalb der Flexbox festzulegen. Die möglichen vertikalen Ausrichtungspositionen können bei „ Spitze “, Mitte ', oder ' Unterseite ” Seite.
Die praktischen Demonstrationen zum Ausrichten von Elementen in diesen Richtungen sind nachstehend aufgeführt:
Beispiel 1: Top-Position
Um den Text innerhalb der Flexbox an der oberen Position auszurichten, muss das „ Flexstart ” Wert wird dem “ Ausrichtungselemente ' Eigentum. Diese Eigenschaft wird dem Haupt-Div zugewiesen, das als Flex angezeigt wird. Nehmen wir an, das div mit einer Klasse von „ Vertikale “ wird in der HTML-Datei erstellt. Wählen Sie dann in der CSS-Datei diese Klasse aus und weisen Sie die folgenden Eigenschaften zu:
.Vertikale {
Farbe : Weiss ;
Höhe : 150px ;
Anzeige : biegen ;
Polsterung-links : 20px ;
Ausrichtungselemente : Flexstart ;
Hintergrundfarbe : Waldgrün ;
}
- Zunächst wird dem div mithilfe der CSS-Eigenschaften color, background-color und height ein grundlegender Stil und eine grundlegende Ausrichtung gegeben.
- Die Eigenschaft „display“ wird ebenfalls auf „flex“ gesetzt, um daraus eine Flexbox zu machen.
- Um den Text am Anfang der Flexbox anzuzeigen, setzen Sie die Eigenschaft „align-items“ auf „flex-start.
Nach Ausführung des obigen Codes sieht die Webseite so aus:
Die Ausgabe zeigt, dass der Text jetzt an der obersten Position innerhalb der Flexbox ausgerichtet ist.
Beispiel 2: Mittlere Position
Um den Text vertikal an der mittleren Position auszurichten, stellen Sie das „ Center „Wert zum CSS“ Ausrichtungselemente ' Eigentum:
.Vertikale {Farbe : Weiss ;
Höhe : 150px ;
Anzeige : biegen ;
Polsterung-links : 20px ;
Ausrichtungselemente : Center ;
Hintergrundfarbe : Waldgrün ;
}
Nach der Ausführung des obigen Codes:
Die obige Ausgabe zeigt, dass der Text jetzt in der Mitte der Flexbox ausgerichtet ist.
Beispiel 3: Untere Position
Um den Text unten in der Flexbox festzulegen, weisen Sie dem „ Flex-Ende ” Wert auf die “ Ausrichtungselemente ' Eigentum. Diesmal wird der Text an der Position ausgerichtet, an der die Flexbox endet, also an der unteren Seite:
.Vertikale {Farbe : Weiss ;
Höhe : 150px ;
Anzeige : biegen ;
Polsterung-links : 20px ;
Ausrichtungselemente : Flex-Ende ;
Hintergrundfarbe : Waldgrün ;
}
Nach Ausführung des obigen Codes sieht die Webseite so aus:
Die obige Ausgabe zeigt, dass der Text jetzt vertikal an der unteren Position ausgerichtet ist.
Methode 2: Verwenden der Eigenschaft „justify-content“.
Der ' rechtfertigen-Inhalt ”-Eigenschaft kann auch verwendet werden, um den Text innerhalb der Flexbox vertikal auszurichten. Es funktioniert jedoch genauso wie das „ Textausrichtung ”-Eigenschaft und richtet Elemente in Zeilenrichtung aus. Um also die Richtung der Ausrichtung zu ändern, muss das „ Flex-Richtung ”-Eigenschaft wird verwendet, um die “ rechtfertigen-Inhalt „Ausrichtung auf“ Spalte ” Richtung:
.Vertikale {Höhe : 150px ;
Anzeige : biegen ;
Polsterung-links : 20px ;
Farbe : Weiss ;
Hintergrundfarbe : dunkelcyan ;
Flex-Richtung : Spalte ;
rechtfertigen-Inhalt : Flex-Ende ;
}
Die Erklärung des obigen Codes ist unten angegeben:
- Der ' Höhe “, „ Farbe ' Und ' Polsterung-links ”-Eigenschaften funktionieren genau wie die obige Methode.
- Stellen Sie danach „ Spalte ” Wert auf die “ Flex-Richtung “ der Flexbox, um Stile über Spalten anzuwenden.
- Danach ist die „ rechtfertigen-Inhalt ”-Eigenschaft richtet den Text vertikal aus.
- Am Ende ist das „ Flex-Ende ” Wert richtet das Element auf dem „ Unterseite ” Seite.
Notiz : Benutzer können auch „ Flexstart ' Und ' Center ” Werte zu den “ Spitze ', Und ' Mitte ” Seiten bzw.
Nach dem Ausführen des obigen Codes sieht die Webseite beispielsweise so aus:
Die obige Ausgabe zeigt, dass der Text am unteren Rand der Flexbox ausgerichtet ist.
Abschluss
Um den Text in einer Flexbox vertikal auszurichten, muss das „ Ausrichtungselemente ' Und ' rechtfertigen-Inhalt ” CSS-Eigenschaften können verwendet werden. Diese beiden Eigenschaften erhalten „ Flexstart “, „ Center ' oder ' Flex-Ende ” Werte zum Ausrichten des Textes an “ Spitze “, „ Mitte ' Und ' Unterseite ” Richtungen innerhalb der Flexbox. Dieser Artikel hat die vertikale Ausrichtung von Text in einer Flexbox demonstriert.