Aquest article demostra com alinear text verticalment dins d'un flexbox:
Mètode 1: utilitzant la propietat 'align-item'.
Per alinear el text verticalment, els usuaris poden utilitzar el ' element d'alineació ” propietat proporcionada per CSS. Ajuda als elements a establir la seva alineació dins de la caixa flexible. Les possibles posicions d'alineació vertical poden estar a la ' superior ”, mig ”, o “ inferior ” costat.
Les demostracions pràctiques per alinear elements en aquestes direccions s'indiquen a continuació:
Exemple 1: posició superior
Per alinear el text dins de la caixa flexible a la posició superior, el ' inici flexible ' es proporciona el valor ' alinear elements ' propietat. Aquesta propietat s'assigna al div principal que es mostrarà com a flex. Suposem, el div amb una classe de ' vertical ” es crea al fitxer HTML. A continuació, al fitxer CSS, seleccioneu aquesta classe i assigneu les propietats següents:
.vertical {
color : blanc ;
alçada : 150 píxels ;
visualització : flexionar ;
farciment-esquerra : 20 píxels ;
alinear elements : inici flexible ;
color de fons : verd boscós ;
}
- En primer lloc, l'estil i l'alineació bàsics es donen al div mitjançant les propietats de color, color de fons i alçada de CSS.
- La propietat 'display' també està configurada a 'flex' per convertir-la en una caixa flexible.
- Finalment, per mostrar el text a l'inici de la caixa flexible, configureu la propietat 'align-items' a 'flex-start.
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida mostra que el text ara està alineat a la posició superior dins del flexbox.
Exemple 2: Posició mitjana
Per alinear verticalment el text a la posició central, estableix el ' centre 'valor al CSS' alinear elements ' propietat:
.vertical {color : blanc ;
alçada : 150 píxels ;
visualització : flexionar ;
farciment-esquerra : 20 píxels ;
alinear elements : centre ;
color de fons : verd boscós ;
}
Després de l'execució del codi anterior:
La sortida anterior mostra que el text ara està alineat al centre de la caixa flexible.
Exemple 3: Posició inferior
Per establir el text a la part inferior del quadre flexible, assigneu el ' extrem flexible ” valor a “ alinear elements ' propietat. Aquesta vegada, el text s'alinea a la posició on acaba el flexbox significa a la part inferior:
.vertical {color : blanc ;
alçada : 150 píxels ;
visualització : flexionar ;
farciment-esquerra : 20 píxels ;
alinear elements : extrem flexible ;
color de fons : verd boscós ;
}
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida anterior mostra que el text ara està alineat verticalment a la posició inferior.
Mètode 2: Ús de la propietat 'justify-content'.
El ' justificar-contingut La propietat també es pot utilitzar per alinear verticalment el text dins del flexbox. Tanmateix, funciona igual que el ' alineació de text ” i alinea els elements en la direcció de la fila. Per tant, per canviar la direcció d'alineació, el ' direcció flexible La propietat s'utilitza per configurar el justificar-contingut 'alineació cap a' columna ' direcció:
.vertical {alçada : 150 píxels ;
visualització : flexionar ;
farciment-esquerra : 20 píxels ;
color : blanc ;
color de fons : cian fosc ;
direcció flexible : columna ;
justificar-contingut : extrem flexible ;
}
L'explicació del codi anterior es proporciona a continuació:
- El ' alçada ”, “ color ' i ' farciment-esquerra ” Les propietats funcionen igual que el mètode anterior.
- Després d'això, configureu el ' columna ” valor a “ direcció flexible ” del flexbox per aplicar estils a través de columnes.
- Després d'això, el ' justificar-contingut ” La propietat alinea el text verticalment.
- Al final, el ' extrem flexible ' el valor alinea l'element al ' inferior ” costat.
Nota : Els usuaris també poden configurar ' inici flexible ' i ' centre ” valors a “ superior ”, i “ mig ” costats, respectivament.
Per exemple, després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida anterior mostra que el text està alineat a la part inferior de la caixa flexible.
Conclusió
Per alinear verticalment el text dins d'una caixa flexible, el ' alinear elements ' i ' justificar-contingut Es poden utilitzar propietats CSS. Ambdues propietats tenen ' inici flexible ”, “ centre ' o ' extrem flexible ” valors per alinear el text a “ superior ”, “ mig ' i ' inferior ” direccions dins del flexbox, respectivament. Aquest article ha demostrat l'alineació vertical del text en una caixa flexible.