Comment centrer une image en programmation HTML

Un codeur de page web utilise le langage de balisage hypertexte pour dire au navigateur web le but fonctionnel de chaque élément sur une page, comme un paragraphe, un titre ou une liste. Depuis HTML 4, les feuilles de style en cascade (CSS) ont fourni au codeur un moyen de dire au navigateur comment chacun de ces éléments devrait apparaître, séparément de la définition de ce qu'ils sont. Une page peut avoir différents styles CSS pour différents types d'appareils, comme les téléphones mobiles et les ordinateurs de bureau, permettant à l'apparence de la page de changer sans que le codeur n'ait besoin de changer le HTML. Utilisez les propriétés CSS pour centrer une image.

Étape 1

Placez la balise « img » dans le fichier HTML où vous voulez que votre image s'affiche sur la page web. Elle doit être entre les balises « body » et après les balises « h1 ». Par exemple,

<body>

<h1 style="text-align:center;">Ceci est votre texte.</h1> <img src="photo.jpg" alt="Une description de l'image" width="270" height="50" />

</body>

définit une image nommée photo.jpg qui fait 170 pixels de large et 50 pixels de haut. C'est la première chose sur la page après le titre principal.

Étape 2

Utilisez l'attribut CSS « margin » pour définir l'espace autour des éléments de page, comme les images. La valeur « auto » pour l'attribut margin dit au navigateur web de déterminer automatiquement la quantité d'espace. Donc, <img src="photo.jpg" alt="Une description de l'image" width="170" height="50" style="margin:auto;" /> définit que l'espace autour de l'image est déterminé par le navigateur.

Étape 3

Utilisez la propriété « display » pour définir comment un élément de page est affiché. La valeur « block » pour la propriété display dit au navigateur web d'afficher l'élément sur sa propre ligne, avec de l'espace au-dessus et en dessous. Donc, <img src="photo.jpg" alt="Une description de l'image" width="170" height="50" style="margin:auto;display:block;" /> définit la même image, mais l'ajout de « display:block; » la place maintenant sur sa propre ligne.

Étape 4

Visualisez la page web dans plusieurs navigateurs différents pour vérifier que l'image est correctement centrée.

Astuce

Incluez la description de l'image dans une balise « alt ». Cela rend votre page plus accessible aux lecteurs malvoyants et garantit que votre code est conforme aux standards. <img src="photo.jpg" alt="Une description de l'image" />