recherche

Maison >interface Web >tutoriel CSS >Comment aligner verticalement du texte dans un `` élément ?

Comment aligner verticalement du texte dans un `` élément ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-26 15:06:11254parcourir

How to Vertically Align Text within a `` Element?

Alignement vertical du texte dans

Dans le développement Web, l'alignement vertical du texte dans un

élément peut être un défi commun. Cette question explore plusieurs méthodes pour réaliser cet alignement.

Solution 1 : Hauteur de la ligne

La solution la plus simple consiste à définir la propriété line-height du

élément en fonction de sa hauteur. Cela fonctionne efficacement lorsque le texte est une seule ligne.

#abc {
  line-height: 50px;
}

Solution 2 : éléments de tableau

Pour le texte sur plusieurs lignes, la propriété d'alignement vertical ne sera pas utilisée. Ça ne marche pas. Au lieu de cela, enveloppez le texte dans un élément et appliquez les styles suivants :

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

Solution 3 : Transformer

Une autre option consiste à utiliser la propriété transform avec translateY() pour positionner le texte verticalement. Cela nécessite de définir la position de l'élément sur absolue et de la traduire de -50% à partir de son sommet.

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Remarque : La solution de transformation peut ne pas être compatible avec les navigateurs plus anciens tels que IE8. Il est recommandé de l'utiliser avec les préfixes de navigateur appropriés pour la prise en charge de plusieurs navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

for Property this position transform table
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：ID ou classe en CSS : quand devriez-vous utiliser chacun d'entre eux ?Article suivant：ID ou classe en CSS : quand devriez-vous utiliser chacun d'entre eux ?

Articles Liés

Voir plus