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.
|
1 2 3 4 5 6 |
<!-- HTML --> <div class="container"> <img src="rue-de-l-info.png" alt="My image" /> </div> |
|
1 2 3 4 5 6 7 8 9 |
// CSS .container { width: 200px; height: 200px; border: 1px #23282d solid; text-align: center; } |
Résultat :
[divider align= »center »]
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
// CSS .container { width: 200px; height: 200px; border: 1px #23282d solid; text-align: center; display: table-cell; vertical-align: middle; } |
Résultat :
Attention
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
[divider align= »center »]
Horizontalement avec flexbox
Le centrage horizontal est devenu vraiment facile avec flexbox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// CSS .container { display: flex; justify-content: center; width: 200px; height: 200px; border: 1px #23282d solid; } .container img { width: 50px; height: 50px; } |
Résultat :
[divider align= »center »]
Verticalement avec flexbox
Avant l’apparition de flexbox, le centrage verticale des éléments était asses complexe. C’est aujourd’hui beaucoup plus accessible. Nous allons le voir dans l’exemple suivant.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// CSS .container { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border: 1px #23282d solid; } .container img { width: 50px; height: 50px; } |
Résultat :