Aligner le texte verticalement en CSS

1. Utilisez la propriété line-height pour aligner le texte verticalement dans CSS
2. Utilisez span à l’intérieur d’un div avec la propriété line-height pour aligner le texte verticalement dans CSS
3. Utilisez flexbox pour aligner le texte verticalement dans CSS

Nous allons présenter trois méthodes d’alignement vertical d’un texte en CSS.

Utilisez la propriété line-height pour aligner le texte verticalement dans CSS

Si nous avons du texte sur une seule ligne, nous pouvons utiliser la propriété line-height pour aligner le texte verticalement dans un div. La propriété CSS line-height définit la hauteur d’une boîte de ligne. Il est utilisé pour définir la distance entre les lignes de texte. Cependant, nous pouvons également l’utiliser pour aligner verticalement notre texte d’une ligne. Cette technique ne fonctionnera pas si le texte comporte des sauts de ligne ou comporte plusieurs lignes. Nous pouvons donner à line-height n’importe quelle valeur en fonction de nos besoins sur l’endroit où nous voulons aligner le texte verticalement.

Par exemple, créez un div et écrivez un texte d’une ligne à l’intérieur. Donnons au div le nom de classe center. Écrivez un texte d’une ligne aligné verticalement à l’intérieur du div. Donnez au div une height de 100px et une hauteur de ligne de 100px pour aligner verticalement le texte au centre du div. Enfin, donnez au div une border ​​de 1px solid black pour voir l’alignement vertical.

L’exemple ci-dessous montre que le texte est aligné verticalement au centre du div contenant height de 100 px et border ​​de 1px solid black en utilisant la propriété CSS line-height.

Exemple de code :

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

Utilisez span à l’intérieur d’un div avec la propriété line-height pour aligner le texte verticalement dans CSS

Nous pouvons également aligner plusieurs nombres de lignes verticalement en utilisant la propriété line-height. Nous pouvons placer une balise span à l’intérieur d’une balise div et mettre plusieurs lignes à l’intérieur de la balise span. Nous pouvons utiliser la balise br pour rompre la ligne et en faire un texte sur plusieurs lignes. Ensuite, nous pouvons utiliser la propriété line-height pour div et span. Nous utiliserons également la propriété CSS display: inline-block pour la balise span afin d’envelopper plusieurs lignes de code ensemble. Par conséquent, nous devons également utiliser la propriété CSS line-height à l’intérieur de span pour séparer le texte de plusieurs lignes les uns des autres.

Par exemple, créez un div puis un span à l’intérieur du div. Écrivez plusieurs lignes de texte à l’intérieur de cette span à l’aide de la balise br. En CSS, sélectionnez le div et donnez la height de 100px et définissez line-height sur 100px. Définissez la bordure div de 1px solide noir pour voir l’alignement. Définissez la propriété display de la balise span sur inline-block pour envelopper plusieurs lignes de texte ensemble. Donnez line-height à 20px à la span pour donner un espace entre plusieurs lignes de texte. Gardez le vertical-align sur middle pour placer verticalement le texte exactement au milieu.

L’exemple ci-dessous montre l’alignement vertical de plusieurs lignes de texte dans un div à l’aide des propriétés line-height et display: inline-block.

Exemple de code :

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

Utilisez flexbox pour aligner le texte verticalement dans CSS

Nous pouvons également utiliser flexbox pour aligner un texte dans un div verticalement ou horizontalement. Nous pouvons utiliser flexbox en définissant la propriété display sur flex. Après avoir défini la propriété display sur flex, nous pouvons utiliser la propriété align-items et mettre sa valeur comme center pour aligner un texte verticalement dans un div. Nous pouvons utiliser la propriété justify-content et la définir sur center pour centrer le texte dans un div horizontalement. Les Flexbox sont très faciles à utiliser, et elles sont également très efficaces.

Par exemple, créez un div et écrivez une ou plusieurs lignes de texte à l’intérieur. Utilisez la balise br pour créer plusieurs lignes de texte. Donnez une hauteur de 100px au div. Définissez la bordure sur 1px solide noir pour voir l’alignement. Mettez la valeur de la propriété display comme flex pour utiliser flexbox. Ensuite, définissez align-items sur center pour aligner le texte verticalement dans le div au centre. On peut aussi aligner le texte horizontalement en mettant la valeur de justify-content à center.

Ainsi, nous pouvons utiliser flexbox pour aligner le texte horizontalement et verticalement en CSS.

Exemple de code :

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}