Cet article explique comment écrire une légende sous une image.
Comment écrire une légende sous une image ?
Pour écrire une légende sous une image, nous allons proposer différentes méthodes mentionnées ci-dessous :
- Méthode 1 : Comment ajouter une légende d'image en utilisant HTML '
' Élément? - Méthode 2 : Comment ajouter une légende d'image à l'aide de ' ' Élément?
Méthode 1 : Comment ajouter une légende d'image à l'aide de l'élément HTML '
' ? Pour ajouter une légende d'image, suivez les instructions suivantes :
- Tout d'abord, ajoutez le '
', qui est utilisé pour représenter un contenu autonome, éventuellement avec une légende facultative. - Ensuite, insérez un '
'balise à l'intérieur du paragraphe' ' étiqueter. Ajoutez l'image en utilisant le ' src ' attribut. Les ' tout ” La propriété affiche le contenu ajouté si l'image ne s'affiche pas pour une raison quelconque. - Définissez la largeur de l'image sur ' 200px ”.
- Puis le '
La balise ' est utilisée pour ajouter la légende de l'image. De plus, ajoutez la légende entre les balises ' ':
= 'TSL.png' tout = 'Créateurs de contenu TSL' largeur = '200' >
Vous pouvez voir que l'image avec la légende spécifiée a été affichée :
Maintenant, passez à la deuxième méthode pour ajouter la légende à l'aide de CSS.
Méthode 2 : Comment ajouter une légende d'image à l'aide de l'élément «
» ?Pour ajouter la légende de l'image à l'aide de la touche '
', essayez les instructions données :
- Créer un ' ' conteneur et ajoutez un attribut de classe avec le nom ' porte-image ”.
- Ajouter une balise d'en-tête ' ” pour insérer le titre et stylisez le titre selon votre choix.
- Ajoutez un autre élément '
' et insérez un ''Tag avec' src ”, “ tout ' et ' largeur ” attributs entre le conteneur div. - Ajoutez un troisième '
' avec le nom de la classe ' img-légende ”. Ensuite, fournissez la légende entre les balises ''. De plus, le «
” est utilisé pour ajouter un saut de ligne := 'porteur d'images' >
style
= 'TSL.png' tout = 'Créateurs de contenu TSL' largeur = '200' >
= 'img-légende' >
>
>On peut observer que la légende de l'image a été ajoutée avec succès :
Passons maintenant à la section CSS pour appliquer les propriétés.
Style « .image-holder » en CSS
Tout d'abord, accédez au '
« élément ayant une classe » .image-holder ”. Ensuite, appliquez les propriétés CSS suivantes : .image-holder {
positionner : relatif ;
la taille : 100px ;
largeur : 200px ;
marge : auto ;
}Les détails des propriétés mentionnées ci-dessus sont décrits ci-dessous :
- Les ' positionner ' est défini comme ' relatif ' pour spécifier la position d'origine d'un élément qui reste dans le flux du document, tout comme la valeur statique.
- Puis, ' la taille ” est utilisé pour définir la hauteur de l'élément.
- Les ' largeur ” propriété spécifie la taille de l'élément en largeur.
- Les ' marge ' est défini comme ' auto ” pour définir automatiquement l'espace autour de l'élément.
Légende du style en CSS
Dans cette étape, nous allons accéder aux deux classes avec le nom ' porte-image ' et ' img-légende ” et appliquez les propriétés CSS suivantes :
.image-holder .img-légende {
positionner : absolu ;
aligner le texte : centre ;
poids de la police : audacieux ;
largeur : 200px ;
la taille : 50px ;
la gauche : 0px ;
Couleur : #f80909 ;
Contexte : RVB ( 140 , 166 , 253 ) ;
}La description des propriétés susmentionnées est la suivante :
- Les ' aligner le texte ' la propriété est définie comme ' centre ” pour aligner la position du texte au centre.
- Suivant, ' poids de la police ' est attribué comme ' audacieux ” pour définir la police de la légende de l'image.
- Puis le ' Couleur ” La propriété est utilisée pour définir la couleur de l'élément accédé.
- Les ' Contexte ” définit la couleur de l'arrière-plan de l'élément.
- D'autres propriétés, y compris ' positionner ”, “ la taille ', et ' largeur ” sont également utilisés pour appliquer les fonctionnalités respectives.
Sortir
Nous avons évoqué les méthodes d'écriture de la légende sous une image.
Conclusion
Pour écrire une légende sous une image, les utilisateurs peuvent soit utiliser le '
' élément ou un simple ' ' récipient. Pour utiliser le '', ajoutez d'abord le ' ' pour intégrer l'image à l'intérieur de l'élément ' », puis utilisez l'élément « » et ajoutez une légende entre ses balises. Dans la deuxième approche, les utilisateurs peuvent simplement utiliser le ' ” et appliquez différentes propriétés CSS pour embellir la légende. Cet article a démontré les méthodes pour écrire la légende sous une image.
- Tout d'abord, ajoutez le '