Maison > interface Web > tutoriel CSS > Comment fonctionne réellement l'alignement vertical en CSS ?

Comment fonctionne réellement l'alignement vertical en CSS ?

DDD
Libérer: 2024-11-07 05:01:02
original
549 Les gens l'ont consulté

How Does Vertical Alignment Actually Work in CSS?

Alignement vertical en CSS : comprendre les nuances

La propriété vertical-align vous permet de positionner un élément en ligne verticalement au sein de son élément parent. Cependant, son comportement peut être imprévisible à moins que vous n'en compreniez les principes sous-jacents.

Éléments en ligne et hauteur

L'alignement vertical n'affecte que les éléments en ligne. Des éléments tels que

et <div> sont au niveau du bloc et ne sont pas affectés. Pour les éléments en ligne sans hauteur de ligne inhérente, tels que et , vous devez en définir un explicitement à l'aide de la propriété line-height.

Hauteur et alignement vertical

La hauteur de l'élément parent doit avoir une valeur statique (c'est-à-dire pas automatique ni pourcentage). Si la hauteur n'est pas spécifiée, le navigateur la calculera en fonction du contenu, ce qui peut conduire à des résultats inattendus.

Positionnement des éléments en ligne

Contrairement à text-align , qui s'applique à l'élément contenant au niveau du bloc, l'alignement vertical doit être appliqué à l'élément en ligne que vous souhaitez position.

Différences de navigateur

Les navigateurs plus anciens peuvent ne pas prendre en charge l'alignement vertical de manière cohérente. Cependant, les navigateurs modernes le gèrent bien, même lorsqu'ils sont utilisés sur des éléments non en ligne.

Exemple : Centrer le texte

Par exemple, supposons que vous ayez le code HTML suivant :

<div>
Copier après la connexion

Pour centrer le texte verticalement dans #inner, appliquez vertical-align: middle à #header :

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Copier après la connexion

Notez que dans cet exemple, #inner est un élément de bloc en ligne avec une hauteur fixe.

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal