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

Un élément flottant est hors du flux : il ne réagit plus à vertical-align
Quand cette icône a une taille (enfin hauteur) bien différente du texte et qu'on veut un alignement vertical au final différent selon qu'il y ait 1 ou 2 ou 5 lignes de texte, c'est pas la meilleure solution… De mémoire, j'arrivais à avoir avec 1 seule valeur qqch qui allait raisonnablement bien avec ces cas extrêmes mais c'était du bidouillage.
D'autres solutions ont une gestion nickel de l'alignement dans les 2 directions, à préférer maintenant que ça existe et que c'est supporté partout (par contre il faut aussi avoir la main sur le code HTML, ce qui est heureusement plus souvent le cas qu'il y a 10 ans )