CSS 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 -->
<div class="container">
  <img src="rue-de-l-info.png" alt="My image" />
</div> 
// CSS
.container {
  width: 200px;
  height: 200px;
  border: 1px #23282d solid; 
  text-align: center;
}

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
.container {
  width: 200px;
  height: 200px;
  border: 1px #23282d solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

Résultat :

Rue de l'info

2 Commentaires sur “CSS comment centrer une image horizontalement et verticalement dans un bloc ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.