HTML Center Image – CSS Align Img Center Exemple

Si vous créez des sites Web avec HTML et CSS, vous travaillerez souvent avec des images.

Les développeurs se débattent souvent avec l’alignement des images en CSS, notamment lorsqu’ils cherchent à savoir 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 division 🙂

L’élément img étant un élément en ligne, il est un peu plus difficile de le centrer. Mais ne vous inquiétez pas, vous pouvez convertir l’image en un élément de type bloc, puis la centrer.

Dans cet article, je vais vous montrer 4 façons différentes d’aligner une image au centre.

Table des matières

Centrer une image avec la propriété d’alignement du texte

Vous pouvez centrer une image avec la propriété d’alignement du texte.

Il faut savoir que la balise d’insertion des images – img – est un élément en ligne. Le centrage à l’aide de 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 ? Il suffit d’envelopper l’image dans un élément de niveau bloc comme un div et de donner à ce div un text-align de center.

freeCodeCamp


div {
      text-align : center ;
    }

ss-1

Comment centrer une image avec Flexbox

Avec l’introduction de CSS Flexbox, il est devenu plus facile de centrer n’importe quoi.

Voir aussi :  Débordement CSS - Visible, Scroll, Auto ou Hidden ? La propriété Overflow expliquée

Flexbox fonctionne en plaçant ce que vous voulez centrer dans un conteneur et en donnant au conteneur un affichage de flex. Il définit ensuite justify-content sur center, comme le montre 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 également, 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, par opposition à Flexbox qui est bidimensionnel.

Pour centrer une image à l’aide de CSS Grid, enveloppez l’image dans un élément div de type conteneur et donnez-lui un affichage de type grille. Définissez ensuite la propriété place-items sur center.

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

ss-1

P.S.:place-items avec une valeur de centre centre tout horizontalement et verticalement.

Comment centrer une image avec la propriété Margin ?

Vous pouvez également centrer une image en lui attribuant une marge gauche et droite de type auto. Mais tout comme la propriété text-align, margin ne fonctionne que pour les éléments de niveau bloc.

Vous devez donc commencer par convertir l’image en un élément de niveau bloc en lui attribuant un affichage de type bloc.

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

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

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

ss-2

P.S. :Il se peut que vous n’ayez pas à descendre jusqu’à 40% pour la largeur. L’image était déformée à un pourcentage de 60+, c’est pourquoi je suis descendu jusqu’à 40%.

Voir aussi :  Les 5 grands framework CSS de 2022

J’espère que cet article vous aidera à choisir la méthode qui vous convient le mieux pour centrer une image.

Merci de votre lecture.