Comment aligner verticalement du texte dans un `` élément ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-12-26 15:06:11

original

358 Les gens l'ont consulté

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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%);
}

Copier après la connexion

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!

Article précédent：ID ou classe en CSS : quand devriez-vous utiliser chacun d'entre eux ? Article suivant：Apprenez le HTML en quelques jours

Déclaration de ce site Web

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

Derniers numéros