Maison > Article > interface Web > Comment centrer des images surdimensionnées dans une division en utilisant CSS ?
Centrage d'images surdimensionnées dans un div avec CSS
Lorsqu'il s'agit d'une mise en page fluide où les largeurs de conteneurs varient, centrer une image surdimensionnée dans un div peut être difficile d'utiliser CSS seul. Le comportement par défaut des images plus larges que leur conteneur est de s'aligner à gauche, en les laissant décalées vers la droite.
Pour résoudre ce problème, une solution reposant uniquement sur CSS peut être implémentée. Voici comment :
Attribuez la propriété CSS aux divs parents :
<code class="css">position: relative; overflow: hidden;</code>
Cela définit le div comme un conteneur pour le positionnement et limite tout contenu débordant.
Pour l'image surdimensionnée (appelé « enfant »), utilisez le CSS suivant :
<code class="css">position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto;</code>
En utilisant ces propriétés CSS, l'image surdimensionnée sera placée au centre de son div parent, quelle que soit sa taille ou la largeur du parent. Les coordonnées négatives garantissent que le débordement est coupé uniformément sur les deux bords, offrant ainsi un résultat visuellement agréable.
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!