Contenu
revue par
Voici une méthode fiable pour ajouter une légende simple mais attrayante à une image qui reste avec l'image où que vous la déplaciez sur la page Web.
Étapes vers une légende d'image HTML
-
Ajoutez une image à votre page Web.
-
Dans le code HTML de votre page Web, placez une balise div autour de l'image:
-
Ajoutez un attribut de style à la balise div:
style = ""> -
Définissez la largeur du div sur la même largeur que l'image, avec la propriété de style width:
-
Pour les légendes légèrement plus petites que le texte environnant, ajoutez une propriété de taille de police au style div:
-
Les sous-titres sont plus beaux s'ils sont centrés sous l'image, alors ajoutez une propriété d'alignement de texte à l'attribut style:
-
Enfin, ajoutez un peu d'espace supplémentaire entre l'image et la légende, en ajoutant un attribut de style à l'image avec une propriété de style padding-bottom:
style = "padding-bottom: 0.5em;" />
-
Ajoutez ensuite la légende de texte directement sous l'image:
Téléchargez la page Web sur votre serveur et testez-la dans un navigateur.
Conseils de sous-titrage
Les dimensions CSS peuvent être dans de nombreuses mesures différentes, vous devez donc généralement inclure le type de mesure. Par exemple:
Cependant, les dimensions des images HTML sont toujours en pixels, donc vous laissez la mesure désactivée.
Si vous agrandissez la largeur du div par rapport à la largeur de l'image, la légende peut apparaître à côté de l'image. Si c'est ce que vous voulez, ajoutez un
balise directement avant la légende et après la balise d'image.
