Cet article montre comment aligner verticalement du texte dans une boîte flexible :
Méthode 1 : Utilisation de la propriété « align-item »
Pour aligner verticalement le texte, les utilisateurs peuvent utiliser le ' align-item ” propriété fournie par CSS. Il aide les éléments à définir leur alignement à l'intérieur de la flexbox. Les positions d'alignement vertical possibles peuvent être au niveau ' haut ”, milieu ', ou ' bas ' côté.
Les démonstrations pratiques pour aligner les éléments dans ces directions sont indiquées ci-dessous :
Exemple 1 : première position
Pour aligner le texte à l'intérieur de la boîte flexible en position supérieure, le ' flex-start ” la valeur est fournie au “ aligner les éléments ' propriété. Cette propriété est assignée à la div principale qui sera affichée comme flex. Supposons que la div avec une classe de ' vertical ” est créé dans le fichier HTML. Ensuite, dans le fichier CSS, sélectionnez cette classe et attribuez les propriétés suivantes :
.vertical {
couleur : blanc ;
hauteur : 150px ;
afficher : fléchir ;
rembourrage gauche : 20px ;
aligner les éléments : flex-start ;
Couleur de l'arrière plan : forêt verte ;
}
- Tout d'abord, le style et l'alignement de base sont donnés à la div en utilisant les propriétés de couleur, de couleur d'arrière-plan et de hauteur de CSS.
- La propriété 'display' est également définie sur 'flex' pour en faire une flexbox.
- Enfin, pour afficher le texte au début de la flexbox, définissez la propriété 'align-items' sur 'flex-start.
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie affiche que le texte est maintenant aligné sur la position supérieure à l'intérieur de la boîte flexible.
Exemple 2 : Position médiane
Pour aligner verticalement le texte en position médiane, réglez le ' centre « valeur au CSS » aligner les éléments ' propriété:
.vertical {couleur : blanc ;
hauteur : 150px ;
afficher : fléchir ;
rembourrage gauche : 20px ;
aligner les éléments : centre ;
Couleur de l'arrière plan : forêt verte ;
}
Après l'exécution du code ci-dessus :
La sortie ci-dessus indique que le texte est maintenant aligné au centre de la boîte flexible.
Exemple 3 : position inférieure
Pour définir le texte au bas de la boîte flexible, attribuez le ' extrémité flexible ' valeur à la ' aligner les éléments ' propriété. Cette fois, le texte est aligné à la position où la boîte flexible se termine, c'est-à-dire en bas :
.vertical {couleur : blanc ;
hauteur : 150px ;
afficher : fléchir ;
rembourrage gauche : 20px ;
aligner les éléments : extrémité flexible ;
Couleur de l'arrière plan : forêt verte ;
}
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus indique que le texte est maintenant aligné verticalement en position inférieure.
Méthode 2 : Utilisation de la propriété 'justify-content'
Le ' justifier-contenu ” peut également être utilisée pour aligner verticalement le texte à l'intérieur de la flexbox. Cependant, cela fonctionne de la même manière que le ' aligner le texte ” et aligne les éléments dans le sens des lignes. Ainsi, pour changer le sens d'alignement, le ' flex-direction ” la propriété est utilisée pour définir le “ justifier-contenu « alignement vers » colonne ' direction:
.vertical {hauteur : 150px ;
afficher : fléchir ;
rembourrage gauche : 20px ;
couleur : blanc ;
Couleur de l'arrière plan : cyan foncé ;
flex-direction : colonne ;
justifier-contenu : extrémité flexible ;
}
L'explication du code ci-dessus est fournie ci-dessous:
- Le ' hauteur ”, “ couleur ' et ' rembourrage gauche ” Les propriétés fonctionnent exactement comme la méthode ci-dessus.
- Après cela, réglez le ' colonne ' valeur à la ' flex-direction ” de la boîte flexible pour appliquer des styles via des colonnes.
- Après cela, le « justifier-contenu ” aligne le texte verticalement.
- Au final, le « extrémité flexible ” aligne l'élément sur le “ bas ' côté.
Note : Les utilisateurs peuvent également définir ' flex-start ' et ' centre ' valeurs au ' haut ', et ' milieu ” côtés, respectivement.
Par exemple, après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus indique que le texte est aligné au bas de la boîte flexible.
Conclusion
Pour aligner verticalement le texte à l'intérieur d'une boîte flexible, le ' aligner les éléments ' et ' justifier-contenu ” Les propriétés CSS peuvent être utilisées. Ces deux propriétés obtiennent ' flex-start ”, “ centre ' ou ' extrémité flexible ” valeurs pour aligner le texte sur “ haut ”, “ milieu ' et ' bas ” directions à l'intérieur de la flexbox, respectivement. Cet article a démontré l'alignement vertical du texte dans une boîte flexible.