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.