Un texte peut être facilement ajouté n'importe où, mais sans alignement, il peut sembler non représentable et moins attrayant. Un texte non aligné peut également perturber l'apparence d'une page Web. Pour faire face à de telles choses dans les applications Web, nous pouvons utiliser certaines propriétés utiles de CSS qui vous aideront à aligner les textes en un rien de temps.
Cet article vous montrera comment aligner le texte verticalement en CSS.
Comment aligner le texte verticalement en CSS ?
En CSS, vous pouvez utiliser les propriétés ci-dessous pour aligner le texte verticalement :
-
- propriété de hauteur de ligne
- afficher et aligner les propriétés des éléments
Maintenant, passons en revue chaque méthode une par une !
Méthode 1 : Utilisation de la propriété line-height pour aligner le texte verticalement en CSS
La ' hauteur de la ligne ” propriété spécifie la zone ci-dessous et les éléments en ligne vers le haut. Il définit la distance entre un texte et d'autres éléments. En utilisant la propriété line-height, le texte peut facilement être aligné verticalement au milieu.
Exemple
Voici un texte à l'intérieur d'un encadré (bordure) actuellement situé en haut à gauche. Alignons ce texte au centre verticalement et horizontalement :
Passons maintenant à la méthode suivante. ' Boîte flexible ” est une mise en page unidimensionnelle qui vous permet de formater HTML. Vous pouvez également l'utiliser pour aligner des éléments verticalement ou horizontalement. Alors, prenons un exemple et alignons un texte verticalement à l'aide de la flexbox. Exemple Tout d'abord, nous allons rendre notre conteneur flexible en définissant la valeur du ' affichage « propriété en tant que » fléchir ”. Ensuite, utilisez le ' aligner les éléments ” propriété pour définir le contenu au centre verticalement. De plus, pour aligner le contenu au centre horizontalement, le ' justifier-contenu ” la propriété sera utilisée : En CSS, le texte peut être facilement aligné verticalement à l'aide du ' hauteur de la ligne ' propriété. Vous pouvez également utiliser le ' boîte flexible ' pour l'alignement vertical du texte avec ' affichage ' et ' aligner les éléments ' Propriétés. Flexbox est une mise en page unidimensionnelle et est simplement utilisée pour l'alignement vertical ou horizontal des éléments. Cet article propose deux méthodes les plus simples qui peuvent vous aider à aligner le texte verticalement en CSS.
Pour cela, ajoutez un conteneur '
Meilleur site Web éducatif !
div >
La boîte est formée à l'aide d'un ' 3px « frontière et » 250px ' la taille. La ' 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 ' aligner le texte ” propriété pour aligner le texte au centre :
hauteur de ligne : 250px ;
aligner le texte : centrer ;
taille de police : 24 px ;
hauteur : 250px ;
bordure : solide de 3 pixels ;
}
Comme vous pouvez le voir, le texte a été aligné verticalement au centre en utilisant line-height et horizontalement au centre avec la propriété text-align . Méthode 2 : Utilisation de la propriété display et align-items pour aligner le texte verticalement en CSS
affichage: fléchir ;
align-items : center ;
justifier-contenu : centrer ;
taille de police : 24 px ;
hauteur : 200px ;
bordure : solide de 3 pixels ;
}
Le texte spécifié a été centré avec succès :
Nous avons fourni des méthodes liées à l'alignement vertical du texte en CSS. Conclusion