[Résolu] Positionnement image dans du texte

Bonjour,

Je souhaite ajouter une petite image dans du texte pour améliorer la compréhension du texte. Par exemple, lorsque je donne le code d'un panneau routier, j'ajoute l'illustration de ce panneau juste après. J'utilise Wordpress. Il est possible d'aligner l'image horizontalement mais pas verticalement. Je voudrais descendre légèrement les images pour ne pas avoir un interligne énorme là où j'ai ajouté des images.

Capture de mon texte.



Capture d'un autre site.



Merci pour votre aide
Modifié par soky (02 Oct 2020 - 18:39)

Bonjour,

Même si tu la descends un peu, tu auras toujours un problème d'interligne. Tes images me semblent trop grosses.

1) tu peux envisager de réduire la taille de tes images et surtout vérifier qu'elles n'ont pas de blanc en haut et en bas.

2) tu peux augmenter l'interligne (propriété css line-height à appliquer au paragraphe dans lequel est affichée l'image).

3) enfin, tu peux, comme tu l'envisageais, modifier l'alignement vertical des images. Il y a beaucoup de valeurs possibles pour l'alignement vertical, et ce n'est pas toujours compris exactement de la même manière d'un navigateur à l'autre (y a des bugs). Cela dépend aussi de la police de caractère employée pour afficher le texte au milieu duquel se trouve l'image. On n'est jamais sûr de la police qui sera effectivement employée par le navigateur de l'internaute qui lira ton texte. Et l'interligne n'est pas le même pour toutes les polices.

Bref, un résultat "sûr" n'est pas facile à obtenir. Ceci dit, tu peux déjà tenter le code css suivant :

img
{
	vertical-align:bottom;
}

Tu peux aussi mettre une valeur à la place de "bottom". Par exemple :

img
{
	vertical-align:-0.25em;
}

Amicalement,

Bonjour,

Il y a aussi la possibilité d'agrandir l'interligne pour préserver la lisibilité et le rythme d'affichage du texte.
Voici un exemple(lien ci-dessous) en fixant la taille a la hauteur de l'interligne et de l'image arbitrairement a 1.7em et un vertical-align:middle. Une petite marge vertical négative de 0.2em peut être ajouter sur l'image.

https://codepen.io/gc-nomade/pen/eYZqgWR (je me suis servi d'un sprite) mais ça marche avec une image aussi.

Cdt,

Merci. Finalement j'ai trouvé une autre solution car les panneaux routiers ont des tailles variables et c'est compliqué de les insérer dans du texte de manière harmonieuse. Merci pour vos réponses