Vertical-align quand le texte passe sur 2 lignes

Bonjour,

Mieux q'un long discours, j'ai fait ça : https://jsfiddle.net/MarineLG/0wkmj5ho/2/
La 2è ligne de texte passe sous l'icone et bien sûr je le voudrais bien caler sur la 1è ligne.
Comment dois-je faire ?
Merci pour votre aide et bonne soirée !
Marine

Rapidement, un display:flex , avec gestion fastidieuse de l'image pour qu'elle ne s’étire pas dans tout les sens en la replaçant en face de la première ligne.
https://jsfiddle.net/0omg349h/ version un peu bricole

sinon grid https://jsfiddle.net/dopftxge/ version moins bricole

sinon, le classique overflow:hidden a coté du flottant qui nécessite un conteneur pour le texte et toujours le réglage pour poser l'image en face de la première ligne de texte.

Edit, j'oubliais le padding et text-indent négatif https://jsfiddle.net/7btxrkv6/
Modifié par gcyrillus (07 Jun 2019 - 21:06)

Waouh, merci pour tous ces exemples ! Laquelle préconises tu pour que ça soit propre en responsive ? (le overflow hidden, si tu as un jsfiddle je prends )

Bonjour Newki75,
En fait c'est à toi de nous dire, comment tu veux que cela s'affiche pour le responsive .
Comment doit réagir le texte par rapport à l'image, notamment quand celui-ci est sur plusieurs lignes et que les lignes sont plus grande que la hauteur de l'image.

Et un float:left c'était pas suffisant ?
JsFiddle

Newki75 a écrit :
Waouh, merci pour tous ces exemples ! Laquelle préconises tu pour que ça soit propre en responsive ? (le overflow hidden, si tu as un jsfiddle je prends )

Cela nécessite une modification de la structure. 1 élément flottant puis un autre.
Soit en sortant l'image du <p> (ce qui n'est pas une structure valide) soit en mettant 2 block cote à cote ( p et p ou div et p ou autre balise de type block ), l'un flottant avec l'image et l'autre avec un overflow:hidden qui ne passera pas sous le flottant (donc pas de contenu qui glisse dessous). exemple https://jsfiddle.net/9pwfoq3c/
ou bien display comme indiqué précédemment sans toucher a ta structure actuelle. grid ou flex fonctionnerait bien avec un réalignement manuelle pour l'image, enfin le text-indent avec un padding fonctionne aussi pour les vieux machins, mais fait aussi bricole car un réalignement pour l'image est aussi nécessaire pour garder un line-height cohérent entre la première, deuxième et les lignes suivantes. (edit : https://jsfiddle.net/7dr4sf5v/1/ ) ... oui , en effet le float est probablement le plus "propre" à envisager en ne touchant à rien
Modifié par gcyrillus (10 Jun 2019 - 21:47)

Le float left fonctionne bien avec le texte sur 2 lignes mais en dessous j'ai d'autres icônes avec une seule ligne de texte et elle n'est plus centré verticalement, elle est aligné sur le haut de l'icône malgré le vertical-align: middle. Faut-il mettre un p autour du texte et un float right ?

En ts cas merci pour votre aide, je progresse sur le domaine et je dirai à mon graphiste que le texte en dessous des icônes c'est vachement mieux