Centrer une image en CSS

1. Utilisez les propriétés display et margin pour centrer une image en CSS
2. Utilisez la propriété text-align pour centrer une image en CSS
3. Utiliser la propriété CSS flexbox pour centrer une image

Dans cet article, nous allons présenter trois méthodes pour centrer une image en HTML à l’aide de CSS.

Utilisez les propriétés display et margin pour centrer une image en CSS

On peut utiliser les propriétés CSS display et margin ensemble pour centrer une image. La propriété display de l’image est initialement inline. Par conséquent, nous pouvons ajouter plusieurs images dans une ligne. Par exemple, si nous écrivons le code suivant, nous pouvons voir deux images d’affilée.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

Il faut donc changer la propriété display de l’image en block pour qu’une seule image soit placée sur une ligne. Ensuite, on peut donner à l’image la margin de 0px auto pour la centrer. L’image aura une marge de 0px en haut et en bas. La première valeur peut être n’importe quel nombre, mais la deuxième valeur doit être auto. L’auto donne à l’image une marge qui la place en plein centre. Ce processus ne fonctionne que si nous devons centrer une seule image à la suite.

Par exemple, créez un document HTML et placez une image à l’aide de la balise img. Écrivez correctement la valeur src et écrivez un alt pour rendre l’image significative lorsque l’image n’est pas affichée pour une raison quelconque. Utilisez l’image de substitution https://loremflickr.com/320/240 dans l’attribut src. En CSS, définissez la propriété display sur block et attribuez-lui une margin de 0px auto. La première valeur de margin est définie sur n’importe quel nombre selon nos besoins.

L’exemple ci-dessous montre que l’image est centrée lorsque nous définissons la valeur display sur block et lui donnons une margin de 0px auto.

Exemple de code :

<img src="/img/DelftStack/logo.png" alt="Logo" />

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

Utilisez la propriété text-align pour centrer une image en CSS

On peut utiliser la propriété CSS text-align pour centrer une image. Nous pouvons envelopper une image dans un div et définir la propriété text-align sur center, puis l’image sera centrée. Cette méthode peut centrer plusieurs images sur une ligne, contrairement à la méthode précédente qui ne centrait qu’une seule image. Nous pouvons utiliser cette méthode à la fois pour des images simples et multiples.

Par exemple, créez un div et attribuez-lui une classe de parent. Ensuite, à l’intérieur du div, utilisez la balise img pour télécharger une image. Réglez src sur https://loremflickr.com/320/240 et alt sur cat. En CSS, sélectionnez le div en utilisant son nom de classe, c’est-à-dire parent et définissez sa propriété text-align sur center.

L’exemple ci-dessous montre que l’image à l’intérieur du div est centrée lorsque nous définissons la propriété CSS text-align de div comme center.

Exemple de code :

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

Utiliser la propriété CSS flexbox pour centrer une image

Flexbox est l’une des technologies CSS les plus utilisées. L’idée principale derrière flexbox est de donner au conteneur la possibilité de modifier ses éléments. Nous pouvons utiliser les propriétés flexbox à l’intérieur d’un conteneur en définissant la propriété display sur flex. Ensuite, nous pouvons utiliser la propriété justifiify-content: center pour centrer horizontalement les éléments ou les images à l’intérieur du conteneur. Nous pouvons définir la propriété align-items sur center pour centrer les éléments verticalement.

Par exemple, créez un div et donnez-lui le nom de classe container. Placez ensuite une image à l’intérieur du div en utilisant la balise img avec src et alt. Sélectionnez le div en utilisant son nom de classe, c’est-à-dire container et définissez sa propriété display sur flex. Ensuite, définissez la propriété justify-content flexbox sur center.

L’exemple ci-dessous montre que image à l’intérieur du div est centrée en utilisant les propriétés flexbox.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}