Comment utiliser le pourcentage de remplissage ou la marge basée sur la hauteur du conteneur parent en CSS ?

Comment définir le remplissage ou la marge en pourcentage de la hauteur du conteneur parent

Lorsque vous essayez d'aligner un élément verticalement à l'aide de CSS, cela peut sembler logique pour définir la propriété padding-top ou margin-top en pourcentage de la hauteur du conteneur parent. Cependant, l'utilisation de pourcentages avec padding-top et margin-top donne des valeurs relatives à la largeur du conteneur, provoquant un comportement inattendu lorsque la largeur du conteneur change.

La solution

Pour définir le remplissage ou la marge en pourcentage de la hauteur du conteneur parent, évitez d'utiliser padding-top et margin-top. Au lieu de cela, définissez la propriété top ou bottom de l'élément dans le conteneur parent.

`

height: 200px;

}

.élément-enfant {

position: absolute;
top: 50%;

}

<div><p></p></div>`<p><strong> Explication</strong></p><p>En utilisant la propriété top, la position de l'élément enfant est maintenant par rapport à la hauteur du conteneur parent, garantissant que l'alignement vertical reste cohérent quelle que soit la largeur du conteneur.</p>

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!