Comment obtenir un alignement vertical fiable en CSS à l'aide de pourcentages de hauteur ?

Alignement vertical en CSS à l'aide du pourcentage de la hauteur du conteneur parent

Dans le but d'obtenir un alignement vertical en CSS, vous avez utilisé l'approche suivante :

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

Bien qu'initialement prometteuse, cette approche s'est avérée problématique lors de l'ajustement de la largeur du div .base, provoquant l'alignement vertical casser. Ce comportement provient du fait que le padding-top est calculé en pourcentage de la largeur au lieu de la hauteur comme prévu.

Solution : Utilisation des propriétés verticales

Pour résoudre ce problème, vous pouvez exploiter les propriétés CSS verticales au lieu de padding-top. Ces propriétés sont définies par rapport à la hauteur de l'élément parent :

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  top: 50%;
  position: absolute;
}

En définissant top à 50 %, vous pouvez effectivement centrer le div .vert-align interne verticalement dans le conteneur .base. Cette approche garantit que l'alignement vertical reste intact quelle que soit la largeur de .base. N'oubliez pas de définir la position du div interne sur absolue pour que cela fonctionne correctement.

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!