Maison >interface Web >tutoriel CSS >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 ?

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 ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-11 20:17:15462parcourir

Why Does Percentage-Based Vertical Padding Fail, and How Can I Use Percentage Heights for Vertical Alignment in 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!

Déclaration:
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