[Résolu] Aligner verticalement plusieurs lignes de texte et une image

Bonjour à tous (ça faisait longtemps)

J'aimerais aligner verticalement un bloc de texte et une image dans une div, cela sans utiliser de tableau (bah oui eh !) et sans bricoler avec des flottants (si possible). J'avais déjà lu un post "Résolu" là-dessus mais pas moyen de le retrouver. J'ai donc essayé une méthode (Absmiddle en XHTML) : ça fonctionne pour UNE ligne de texte, mais pas un paragraphe...

Où j'en suis :

HTML

<div class="conteneur">
     <img src="img.png"><span>Nouveau : .FR Réservation pour TOUS ! [...]</span>
</div>

CSS

div.conteneur img, span {
vertical-align:middle;
display:inline-block; }

Donne :


Ce que j'aimerais :


Merci pour vos idées (et si par hasard quelqu'un a ce fameux topic dont j'ai parlé en marque-pages, qu'il fasse tourner !)
Modifié par BeliG (27 Oct 2007 - 14:22)

Bonsoir,
une solution consiste à passer ton span en position:absolute avec une marge gauche, mais pourquoi veux tu éviter les flottants? Ils sont fait pour ce genre de cas.

EDIT
Sinon voir ici: http://yidille.free.fr//plux/valign/?2-complement-vertical-align
Modifié par Hermann (26 Oct 2007 - 19:28)

Bonjour Hermann et merci pour ta réponse,

Hermann a écrit :
[...] mais pourquoi veux tu éviter les flottants? Ils sont fait pour ce genre de cas.

J'voulais pas utiliser les flottants pour plusieurs raisons :
- 2 boites en plus pour chaque élément (float:left pour l'image, right pour le texte),
- 2 boites flottantes implique 2 corrections supplémentaires du bug 3px Jog pour IE,
- et après comment j'aligne mon texte verticalement par rapport à l'image ? en jouant avec le padding ? A tous les coups ça donnera un rendu différent selon la résolution et la taille du texte.

De plus j'suis presque sûr qu'il existe une solution à base de balises <p>, <span> et la propriété vertical-align...

Merci pour ton idée avec la position absolue et le lien, j'vais essayé de creuser ça...
Modifié par BeliG (27 Oct 2007 - 12:54)

Bonjour,

Pour faire bref, frustrant mais pertinent: utiliser un tableau de presentation.

(vertical-align sur des p ne peut pas jouer en raison de la présence dans l'alignement d'une boîte en display:block. Les autres solutions qu'on va te proposer relèvent du bricolage dépendant de la longeur du contenu et/ou de la taille du texte final. Le display:inline-block et le display:table, qui sont les solutions naturelles, ne sont pas suffisamment implémentés) .

Sinon, une approche à laquelle réfléchir selon les contenus et les contraintes de production: cette fichue image ne peut-elle pas être un background CSS ? Apporte-t-elle une information qui ne puisse être présente pas ailleurs dans le contenu texte adjacent ? C'est ce que je privilégierais
Modifié par Laurent Denis (27 Oct 2007 - 13:33)

Hello Laurent Denis

Laurent Denis a écrit :
Le display:inline-block et le display:table, qui sont les solutions naturelles, ne sont pas suffisamment implémentés.

J'pensais toucher au but avec la solution suivante (trouvée sur le site fournit par Hermann) :

HTML

<div class="conteneur">
     <img src="img.png"><span>Nouveau : .FR Réservation pour TOUS ! [...]</span>
</div>

CSS

div.conteneur {
display:table; }

.conteneur img, span {
vertical-align: middle;
display:table-cell; }

Mais Harry Potter qui passait par là n'a pas pu s'empêcher de faire disparaître mon image

Laurent Denis a écrit :
Cette fichue image ne peut-elle pas être un background CSS ? Apporte-t-elle une information qui ne puisse être présente pas ailleurs dans le contenu texte adjacent ?

C'est vrai qu'elle pourrait être placée en background, mais j'préfère faire un tableau que de bricoler avec les padding pour placer le paragraphe verticalement et horizontalement...

Laurent Denis a écrit :
Pour faire bref, frustrant mais pertinent: utiliser un tableau de presentation.

J'allais le dire

Merci à vous
Modifié par BeliG (27 Oct 2007 - 14:20)