Article original : HTML Center Image – CSS Align Img Center Example

Si vous créez des sites web avec HTML et CSS, vous travaillerez beaucoup avec des images.

Les développeurs ont souvent du mal avec l'alignement des images en CSS, surtout lorsqu'ils essaient de comprendre comment centrer une image.

Centrer quoi que ce soit en CSS n'est pas vraiment une chose simple - surtout pour les débutants. C'est pourquoi les gens se vantent d'être capables de centrer une div. :)

Puisque l'élément img est un élément en ligne, cela rend un peu plus difficile le centrage. Mais ne vous inquiétez pas, vous pouvez convertir l'image en un élément de bloc et ensuite la centrer.

Dans cet article, je vais vous montrer 4 façons différentes de centrer une image.

Table des Matières

Comment Centrer une Image avec la Propriété Text Align

Vous pouvez centrer une image avec la propriété text-align.

Une chose que vous devez savoir est que la balise pour insérer des images – img – est un élément en ligne. Le centrage avec la propriété text-align fonctionne uniquement pour les éléments de niveau bloc.

Alors, comment centrer une image avec la propriété text-align ? Vous enveloppez l'image dans un élément de niveau bloc comme un div et vous donnez au div un text-align de center.

<div>
    <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
      text-align: center;
    }

ss-1

Comment Centrer une Image avec Flexbox

L'introduction de CSS Flexbox a facilité le centrage de n'importe quoi.

Flexbox fonctionne en plaçant ce que vous voulez centrer dans un conteneur et en donnant au conteneur un display de flex. Ensuite, il définit justify-content sur center comme montré dans l'extrait de code ci-dessous :

  div {
      display: flex;
      justify-content: center;
    }

ss-1

P.S. : Une propriété justify-content définie sur center centre une image horizontalement. Pour centrer l'image verticalement aussi, vous devez définir align-items sur center.

Comment Centrer une Image avec CSS Grid

CSS Grid fonctionne comme Flexbox, avec l'avantage supplémentaire que Grid est multidimensionnel, contrairement à Flexbox qui est bidimensionnel.

Pour centrer une image avec CSS Grid, enveloppez l'image dans un élément div conteneur et donnez-lui un display de grid. Ensuite, définissez la propriété place-items sur center. 

 div {
      display: grid;
      place-items: center;
    }

ss-1

P.S. :place-items avec une valeur de center centre n'importe quoi horizontalement et verticalement.

Comment Centrer une Image avec la Propriété Margin

Vous pouvez également centrer une image en définissant une marge gauche et droite sur auto. Mais tout comme la propriété text-align, margin fonctionne uniquement pour les éléments de niveau bloc.

Donc, ce que vous devez faire est de convertir l'image en un élément de niveau bloc d'abord en lui donnant un display de block.

img {
      display: block;
      margin: 0 auto;
    }

Ces 2 propriétés pourraient suffire. Mais parfois, vous devez définir une largeur pour l'image, afin que les marges gauche et droite de auto aient des espaces à prendre.

 img {
      display: block;
      margin: 0 auto;
      width: 40%;
    }

ss-2

P.S. : Vous n'aurez peut-être pas à descendre aussi bas que 40% pour la largeur. L'image était déformée à un pourcentage de 60+, c'est pourquoi je suis descendu aussi bas que 40%.

J'espère que cet article vous aide à choisir la méthode qui fonctionne le mieux pour vous pour centrer une image.

Merci d'avoir lu.