Comment centrer une image en CSS3 - dummies

L'une des questions les plus fréquemment posées à propos de CSS3 est comment centrer une image sur la page. Malheureusement, la plupart des réponses que vous recevez ne traitent que de la balise

, sans montrer comment centrer un conteneur. L'utilisation d'un conteneur est importante car il se peut que vous souhaitiez ajouter ultérieurement d'autres éléments à cette image. La procédure suivante indique comment centrer l'image.

1. Ouvrez le SimpleGraphics. Fichier CSS et ajoutez le style suivant.

   #ImageContainer img {height: 400px; largeur: 400px; margin: 0px;}
   

   Le but de ce style est de créer une image d'une taille spécifique. Il y a un certain nombre de façons de traiter des images de différentes tailles. C'est l'un d'eux. Cela fonctionne bien quand la plupart de vos images sont de la même taille.

   Dans certains cas, par exemple lorsque vous centrez des images de tailles très différentes, vous devez recourir à JavaScript. Pour placer une image au centre de la page, vous devez connaître la taille de l'image. De nombreuses bibliothèques tierces facilitent le centrage des images à l'écran - la technique CSS seule a des limites.

2. Ajoutez le code suivant au style #ImageContainer.

   position: absolue; hauteur: 400px; largeur: 400px; gauche: 50%; marge gauche: -205px;
   

   Ce code définit la position comme absolue et lui donne la même taille que l'image, de sorte que les balises

   sont liées. Il place ensuite le côté gauche des 50% sur la page, de sorte que peu importe comment l'utilisateur change la fenêtre du navigateur, le côté gauche de la volonté restera au centre.

   Bien sûr, vous ne voulez pas centrer le côté gauche de - vous voulez centrer l'image. Le paramètre Marge-gauche déplace la marge gauche de 205 pixels vers la gauche (la moitié de la taille totale de l'image, plus le remplissage), de sorte que le centre de l'image se trouve maintenant au centre de la page.

3. Enregistrez le fichier CSS et rechargez la page.

   Vous voyez l'image et son cadre centré sur la page.