Centrer le texte verticalement en CSS

1. Utilisez la propriété line-height pour centrer le texte verticalement en CSS
2. Utilisez les propriétés display, vertical-align et line-height pour centrer le texte verticalement en CSS
3. Simuler l’affichage du tableau pour centrer verticalement le texte en CSS

Cet article présentera des méthodes pour centrer les textes verticalement en CSS.

Utilisez la propriété line-height pour centrer le texte verticalement en CSS

Nous pouvons définir la hauteur de la propriété line-height en tant que div pour centrer le texte verticalement en CSS. La propriété line-height spécifie la hauteur d’une ligne. Il peut être illustré en créant une bordure de l’élément div. Nous pouvons également utiliser la propriété text-align et la définir sur center pour aligner le texte au centre horizontalement.

Par exemple, créez un div en HTML et écrivez le texte Hello World! entre. Ensuite, en CSS, réglez la hauteur du div sur 200px. Réglez également la line-height sur la même valeur. Alignez le texte sur center avec la propriété text-align. Créez une bordure solide de largeur 3px en couleur black en utilisant la propriété abrégée border.

Dans l’exemple ci-dessous, nous avons défini les mêmes pixels de line-height et de height du div. Ainsi, il centre le texte verticalement. Cependant, cette méthode ne fonctionne que pour les textes d’une seule ligne.

Exemple de code :

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

Utilisez les propriétés display, vertical-align et line-height pour centrer le texte verticalement en CSS

Nous pouvons centrer le texte sur plusieurs lignes en utilisant les différentes propriétés CSS telles que display, vertical-align et line-height. La propriété display définit le comportement d’affichage d’un élément. La propriété vertical-align est responsable de l’alignement vertical de l’élément. Nous pouvons définir display sur inline-block et vertical-align sur middle pour obtenir l’alignement vertical de plusieurs lignes de texte.

Par exemple, créez un div en HTML et écrivez span à l’intérieur. Écrivez le texte Hello et coupez la ligne avec <br> puis écrivez World! à l’intérieur du span. Ensuite, en CSS, donnez la line-height et la height à la même valeur de 200px en sélectionnant le div. Donnez une bordure au div et alignez le texte au centre comme nous l’avons fait dans la première méthode. Ensuite, sélectionnez le span et définissez la propriété display sur inline-block. Ensuite, donnez la valeur de middle à la propriété vertical-align. Enfin, définissez la valeur de line-height sur normal.

Dans l’exemple ci-dessous, nous avons changé la propriété line-height en normal dans span pour que les multiples lignes de texte aient la line-height normale. La valeur inline-block commencera la ligne suivante du texte juste en dessous de la ligne ci-dessus. La valeur middle de la propriété vertical-align placera le texte au milieu de l’axe vertical.

Exemple de code :

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

Simuler l’affichage du tableau pour centrer verticalement le texte en CSS

Nous pouvons simuler le texte comme une cellule de tableau pour le centrer verticalement en CSS. Nous utilisons la propriété display pour simuler une table. Nous utiliserons également la propriété vertical-align pour centrer le texte verticalement. Nous allons travailler sur l’extrait HTML de la deuxième méthode et lui appliquer un nouveau CSS.

Tout d’abord, sélectionnez le div et définissez la hauteur, la largeur et la bordure. Utilisez la propriété display et définissez la valeur sur table. Cela fera agir le div comme une table. Ensuite, sélectionnez le span et définissez la propriété display sur table-cell et la propriété vertical-align sur middle. Définir l’élément span comme table-cell rendra l’élément comme une cellule de tableau. De cette façon, nous pouvons créer un texte centré verticalement.

Exemple de code :

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}