Les images d’une page Web peuvent parfois être accompagnées de texte. Les légendes peuvent être créées à partir de la façon de positionner le texte sur une image. Vous ne pouvez pas placer de texte au-dessus d’une image avec uniquement des éléments HTML. Nous devons utiliser les propriétés CSS pour cela.
Les développeurs Web créent des sites Web qui ont une belle apparence afin que les utilisateurs soient plus intéressés et heureux. Le placement de texte sur une image est une façon pour les développeurs d’ajouter un élément visuel à un site Web. En gardant à l’esprit la réactivité, il est important de s’assurer que le texte reste le même même si l’image se redimensionne car elle est réactive.
Comment positionner le texte sur une image
Lors de la création d’une photo galerie ou quelque chose comme ça, vous devrez peut-être placer un texte de légende ou une description sur l’image. Vous pouvez utiliser les méthodes de positionnement CSS en combinaison avec la propriété margin pour positionner ou placer le texte sur une image (c’est-à-dire l’élément).
Coin supérieur gauche
La première position du texte où nous allons définir est le coin supérieur gauche de l’image. Utilisez l’extrait de code suivant.
CSS : nous définissons la position du premier élément div sur”relative”afin que nous puissions définir la position du deuxième élément div sur”absolute.” Le texte qui ira sur l’image a reçu une taille, un poids, un style et une couleur. Les propriétés top et left ont été utilisées pour placer le texte dans le coin supérieur gauche.
Coin inférieur gauche
Afin d’ajouter un texte dans le coin inférieur gauche de l’image utilisez le code mentionné ci-dessous.
CSS : Le reste du code est le même, cependant, pour positionner le texte dans le coin inférieur gauche, nous avons défini la propriété bottom sur 3 %, et propriété laissée à 8 %. Vous pouvez modifier les valeurs de ces propriétés pour comprendre leur fonctionnement.
Centrer
De même, pour placer votre texte au centre, considérez l’exemple ci-dessous. Dans le but d’ajuster le texte sur la position centrale de l’image, nous avons défini la propriété top et la propriété left à 40 %.
Coin supérieur droit
Ce que nous avons simplement fait pour placer le texte dans le coin supérieur droit signifie que nous avons défini la propriété supérieure sur 2 % et la propriété droite sur 10 %. Ce n’est pas une règle absolue, vous pouvez donc modifier ces valeurs selon votre désir.
Coin inférieur droit
Comme vous pouvez le voir, le reste du code est le comme dans les exemples précédents, à la seule différence que pour placer le texte dans le coin inférieur droit, nous avons utilisé la propriété bottom et la propriété right.
FAQ
Comment changer la position de texte dans une image ?
Avec la propriété de position CSS, vous pouvez définir l’emplacement du texte sur une image. Vous pouvez le faire en mettant l’image et le texte dans un”div”en HTML. Ensuite, rendez la position de div « relative » et la position du texte « absolue ». Les éléments absolus sont placés en fonction de l’endroit où se trouve leur élément parent (div).
Comment positionner du texte sur une image réactive ?
Vous pouvez mettre du texte sur une image en utilisant le Propriété de position CSS. Pour ce faire, ajoutez position:absolute au texte et position:relative à l’image. Mettez les deux dans un élément div>. Nous pouvons également utiliser les propriétés top, bottom, left et right pour placer du texte à un certain endroit sur l’image.
Comment spécifier la position du texte en CSS ?
h1 { text-align: centre; } h2 { text-align: left; } h3 { text-align: right; … Alignez la dernière ligne de texte en trois éléments
: p.a { text-align-last: right; } p.b { text-align-last: center; } p.c { … Définir l’alignement vertical d’une image dans un texte : img.a { vertical-align : baseline ; } img.b { vertical-align: text-top; }