Comment centrer une image horizontalement et verticalement dans un bloc ?

Horizontalement

Le centrage horizontal d’une image dans un un conteneur de type bloc, une div par exemple, ne pose pas de problème. Il suffit de définir la propriété CSS text-align à center sur le conteneur.

HTML :

CSS :

Résultat :

Rue de l'info

Verticalement

Le centrage vertical est plus délicat à mettre en place.

Il faut en effet modifier la propriété display de notre conteneur pour pouvoir utiliser la propriété vertical-align qui nous permettra de positionner verticalement l’image.

CSS :

Résultat :

Rue de l'info
Cette technique fonctionne sur Internet Explorer qu’à partir de la version 8. Une autre solution serait de mettre l’image dans un tableau, mais on perdra en sémantique

Partager

Discussion

  1. Nash969 dit:

    Merci ca va me changer la vie. Bravo l’équipe!

Écrivez un commentaire ...

Rue de l'info by RDI © 2019
Advertisment ad adsense adlogger