Comment aligner le texte verticalement dans CSS

Un texte peut être facilement ajouté n'importe où, mais sans alignement, il peut sembler inlassable et moins attrayant. Le texte non aligné peut également perturber l'ensemble d'une page Web. Pour lutter contre de telles choses dans les applications Web, nous pouvons utiliser des propriétés utiles de CSS qui vous aideront à aligner les textes en un rien de temps.

Cet article montrera comment aligner le texte verticalement dans CSS.

Comment aligner le texte verticalement dans CSS?

Dans CSS, vous pouvez utiliser les propriétés ci-dessous pour aligner le texte verticalement:

• • propriété de hauteur de ligne
  • Propriétés d'affichage et d'alignement

Maintenant, passons par chaque méthode une par une!

Méthode 1: Utilisation de la propriété de hauteur de ligne pour aligner le texte verticalement dans CSS

Le "hauteur de la ligne»La propriété spécifie les éléments en ligne de la zone en dessous et vers le haut. Il définit la distance d'un texte des autres éléments. En utilisant la propriété Line-Height, le texte peut facilement être aligné verticalement sur le milieu.

Exemple

Voici un texte à l'intérieur d'une boîte (bordure) actuellement situé en haut à gauche. Alignons ce texte au centre verticalement et horizontalement:

Pour ce faire, ajoutez un conteneur "«Dans la balise du fichier HTML et spécifiez le texte requis:

Meilleur site Web éducatif!

La boîte est formée en utilisant un «3px«Border et»250px" hauteur. Le "taille de police"La propriété est utilisée avec la valeur"24px«Pour rendre la police visible. Nous attribuerons à Div a "hauteur de la ligne" de "250px«Pour aligner son texte verticalement au milieu. Ensuite, nous utiliserons le «alignement de texte»Propriété pour aligner le texte au centre:

div
hauteur de ligne: 250px;
Texte-aligne: Centre;
taille de police: 24px;
hauteur: 250px;
Border: 3px solide;

Comme vous pouvez le voir, le texte a été aligné verticalement sur le centre à l'aide de la hauteur de ligne et horizontalement sur le centre avec la propriété Text-Align.

Maintenant, passons à la méthode suivante.

Méthode 2: Utilisation de la propriété d'affichage et d'alignement des éléments pour aligner le texte verticalement dans CSS

"Flexion"Est une disposition unidimensionnelle qui vous permet de formater HTML. Vous pouvez également l'utiliser pour aligner les éléments verticalement ou horizontalement.

Alors, prenons un exemple et alignons un texte verticalement avec l'aide du Flexbox.

Exemple

Tout d'abord, nous rendrons notre conteneur flexible en définissant la valeur du «afficher«Propriété comme«fléchir". Ensuite, utilisez le «align-items»Propriété pour définir le contenu au centre verticalement. De plus, pour aligner le contenu au centre horizontalement, le «justifier»La propriété sera utilisée:

div
Affichage: flex;
Align-Items: Centre;
Justification-contenu: centre;
taille de police: 24px;
hauteur: 200px;
Border: 3px solide;

Le texte spécifié a été aligné avec succès au centre:

Nous avons fourni des méthodes liées à l'alignement du texte verticalement dans CSS.

Conclusion

Dans CSS, le texte peut être facilement aligné verticalement avec l'aide du «hauteur de la ligne" propriété. Vous pouvez également utiliser le «flexion"Pour l'alignement vertical du texte avec"afficher" et "align-items" propriétés. Flexbox est une disposition unidimensionnelle et est simplement utilisé pour l'alignement vertical ou horizontal des éléments. Cet article a offert deux méthodes les plus faciles qui peuvent vous aider à aligner le texte verticalement dans CSS.