Comment centrer une image en HTML ?

Question

Quelles sont les bonnes pratiques pour centrer une image en HTML ?

Answer 1

La solution la plus répandue pour centrer une image en HTML consiste à utiliser du code CSS.

Pour centrer une image en HTML vous devez :

• Créer une CLASS CSS.
• Intégrer le code CSS de la CLASS dans le code HTML.
• Appliquer la CLASS CSS à la balise HTML <img>.

On cré donc tout d'abord une CLASS CSS pour centrer l'image en HTML :

<style>
.centrer {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

• display: block; permet de commencer sur une nouvelle ligne et d'occuper toute sa largeur.
• margin-left: auto; et margin-right: auto; permettent de centrer l'image.

On applique ensuite la CLASS centrer à la balise HTML <img> :

<img src="iimage.jpg" alt="image" class="centrer">

De cette manière, dès vous appliquez la CLASS centrer à une image HTML, l'image se centre dans son élément.

Answer 2

Vous pouvez également utiliser la propriété CSS text-align pour centrer horizontalement une image dans son bloc. La propriété CSS est à appliquer au bloc parent et non à l'image :

<style>
.centrer {
    text-align: center;
}
</style>
<div class="centrer">
    <img src="image.jpg" alt="centrer une image en HTML et CSS">
</div>