Centrer les images verticalement et horizontalement

Centrer les images horizontalement est simple, un ‘text-aligne:center;’ sur l’élément parent de votre image et le tour est joué. Cependant, centrer les images verticalement est déjà plus complexe. Voici, ci-dessous, diverses méthodes, à vous de choisir celle que vous préférez.

Ici, je vais prendre l’exemple d’une image (le logo de php) qui doit être centré horizontalement et verticalement dans une div. Pour des raisons de simplicité, la div aura une largeur de 100% et une hauteur minimale de 300px. J’ai également ajouté une bordure pour nous aider à voir si notre image est bien centrée.

Voici l’architecture de notre exemple :

Rien de trop compliqué pour vous j’espère 😉

Aligner l’image horizontalement via le css : 

• text-align

Vous pouvez utiliser la propriété ‘text-align’ avec la valeur ‘center’.

•  margin + taille fixe

Si votre image a une taille fixe et que vous la connaissez (il y a toujours un moyen de la connaître), vous pouvez fixer sa taille, mettre la propriété ‘display’ à ‘block’ et précisez les marges gauche et droite comme automatiques.

Sans plus attendre, voici le résultat de nos deux expériences :

Comme vous pouvez le voir, ces deux méthodes fonctionnent pour centrer l’image horizontalement. Notez toutefois que le résultat n’est pas totalement identique, dans le premier exemple, le titre a aussi été centré à cause de la propriété ‘text-align’.

La technique du second exemple peut être appliqué à n’importe quel élément. Par exemple, vous pouvez centrer votre site via cette méthode. Pensez qu’il n’est pas nécessaire d’utiliser la propriété ‘display:block’ si votre élément possède cette propriété par défaut.

Aligner l’image verticalement via le css : 

Voici la partie qui nous intéresse le plus en css. Il n’y a pas de propriété directe pour centrer l’image verticalement. Il existe bien la technique de mettre l’image dans un tableau et d’utiliser ‘vertical-align’ mais ce n’est vraiment pas propre. La mise en page via tableau est mise au placard depuis maintenant quelques années.

• vertical-align

La propriété ‘vertical-align’ doit être appliquée sur un élément qui se comporte comme une cellule de tableau, donc, soit une colonne de tableau, soit une div à qui nous avons dit de se comporter comme tel :

Le contenu est bien aligné verticalement comme nous le souhaitions.

Aligner l’image verticalement et horizontalement via le javascript: 

Il est également possible de positionner l’image pour la centrer via du javascript.

Pour cela, ajustez les margin top et right jusqu’à ce que l’image soit centrée. Mais non je plaisante, il y a vraiment beaucoup plus simple et surtout plus efficace. Il suffit de décaler l’image de 50% par rapport au bord haut et au bord gauche de l’élément parent, puis de décaler à nouveau l’image vers la gauche de la moitié de sa largeur et vers le haut de la moitié de sa hauteur.

En résumé, en css cela donnerait ceci :

Bien sur, vous n’allez pas faire le calcul et écrire le css pour chacune de vos images. C’est pour cela que nous allons le faire en javascript. Personnellement, j’ai choisi de le faire avec jQuery (comme ça, je pourrais me faire un petit module).

PS : N’oubliez pas de mettre ‘position: relative’ sur l’élément parent de l’image.

Ci-dessous, le résultat. C’est exactement ce que nous cherchons à faire. Seule l’image est centrée, le texte reste où il est et en créant un petit plugin vous gagnerez du temps ^^.