Maison > interface Web > tutoriel CSS > Comment centrer verticalement une division à l'intérieur d'une division en pourcentage de hauteur ?

Comment centrer verticalement une division à l'intérieur d'une division en pourcentage de hauteur ?

Mary-Kate Olsen
Libérer: 2024-12-24 21:49:17
original
447 Les gens l'ont consulté

How to Vertically Center a Div Inside a Percentage-Height Div?

Alignement vertical d'un div dans un div à hauteur en pourcentage

Le positionnement d'un div verticalement dans un autre div dont la hauteur est basée sur un pourcentage peut être un défi courant dans le développement Web.

Question :Est-ce possible centrer un div verticalement au sein d'un div qui a une hauteur basée sur un pourcentage ?

Réponse : Oui, il est possible d'obtenir un centrage vertical en utilisant diverses techniques. Une approche populaire consiste à utiliser les propriétés CSS display: table-cell et vertical-align: middle.

En définissant display: table-cell sur le div interne, il devient un élément d'un tableau et hérite des propriétés d'une cellule de tableau. La propriété vertical-align: middle aligne ensuite la cellule verticalement dans le tableau.

Par exemple, considérons le code suivant :

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}
Copier après la connexion

Dans cet exemple, le child-div sera centré verticalement dans le parent-div qui a un 50% hauteur.

Il est important de noter que même si cette approche fonctionne bien pour la plupart des navigateurs, Internet Explorer 6 ne prend pas en charge la propriété display: table-cell. En tant que tel, des méthodes alternatives ou des solutions de compatibilité entre navigateurs devront peut-être être envisagées pour IE6.

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!

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