Pourquoi le remplissage vertical basé sur un pourcentage échoue-t-il et comment puis-je utiliser les hauteurs en pourcentage pour l'alignement vertical dans CSS ?

Comment contrôler le remplissage et la marge à l'aide du pourcentage de la hauteur du conteneur parent

En CSS, le contrôle de l'alignement vertical peut être obtenu à l'aide du padding-top propriété. Cependant, définir cette propriété en pourcentage de la largeur du conteneur parent au lieu de la hauteur peut entraîner un comportement indésirable.

Tentative originale :

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

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

Inattendu Comportement :

Lors de la modification de la largeur du conteneur .base, l'alignement vertical s'est cassé, même bien que padding-top ait été défini en pourcentage. En effet, le remplissage vertical et la marge sont calculés en pourcentage de la largeur du conteneur parent.

Solution :

Au lieu d'utiliser padding-top, utilisez la propriété top pour contrôler l’alignement vertical. top est calculé en pourcentage de la hauteur du conteneur parent.

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

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

Cette structure div imbriquée place un div enfant à l'intérieur du conteneur parent et l'aligne verticalement :

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>

En utilisant top au lieu de padding-top, le div enfant est positionné à 50 % du haut de son conteneur parent, quelle que soit sa largeur. Cela garantit l'alignement vertical même lorsque la largeur du parent change.

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!