css Archives - Rue de l'info

Newsletter Rue de l'info

S'inscrire à la Newsletters
Inscrivez-vous à la newsletters Rue de L'info !

Veuillez laisser ce champ vide
Prénom

E-mail *

Nous gardons vos données privées et ne les partageons qu’avec les tierces parties qui rendent ce service possible. Lire notre politique de confidentialité.

Vérifiez votre boite de réception ou votre répertoire d’indésirables pour confirmer votre abonnement.

Html - CSS,Tutos

CSS comment centrer une image horizontalement et verticalement dans un bloc ?

Posté le 12 octobre 201815 mai 2020 par Nicolas

12
Oct

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.

&lt;!-- HTML --&gt;
&lt;div class=&quot;container&quot;&gt;
  &lt;img src=&quot;rue-de-l-info.png&quot; alt=&quot;My image&quot; /&gt;
&lt;/div&gt;

</div>

// CSS
.container {
  width: 200px;
  height: 200px;
  border: 1px #23282d solid; 
  text-align: center;
}

// CSS

.container {

width: 200px;

height: 200px;

border: 1px #23282d solid;

text-align: center;

}

Résultat : 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 […]

Continuer la lecture →

S'inscrire à la Newsletters

Connexion