Alignement texte et image

Salut tout le monde.

J'essaie de centrer verticalement une image avec du texte, le tout dans un article joomla.

J'ai essayé avec la propriété vertical-align: middle mais cela semble ne pas fonctionner.

Voici le code :

<div style="float: left; width: 45%; vertical-align: middle; display: inline;">
    <p><strong>XXXXXXXXX</strong> XXXXXXXX<br />XXXXXXXXXX</p>
</div>
<div style="float: left; width: 45%; vertical-align: middle; display: inline;">
    <p><img alt="XXXXXXX" src="XXXXXXX" /></p>
</div>

Si quelqu'un a une idée,

Merci,

Ryo

salut
tu ne peus pas aligner verticalement un float(du moins je n'ai toujours pas réussi à le faire...cf:mon post) il faut mettre ton texte et ton image dans un block positionné.
sinon pour vertical-align on parle là
Modifié par e-rwan (20 May 2010 - 15:49)

Salut,

Oki merci pour ta réponse

bonjour,

Attention , le lien vers un topic de 2004 peut-etre en partie obsolete , les navigateurs ont evolué depuis.

float + vertical-align sont incompatible , le flottement d'un element l'extrait en partie du flux naturel de la page et il va s'ancrer juste dessous le dernier element dans le flux , ou au coté d'un autre element flottant si il y a assez d'espace . Il n'y a aucune possibilité que la position et hauteur d'un element flottant puisse etre pris comme référence de positionnement dans un alignement vertical via CSS .

Premier démarche , ne pas mettre l'image en float et la laisser se comporter comme un element 'inline' qui peut-etre aligner verticalement a un autre element de type 'inline' ou 'inline-block' .

Seconde demarche , modifié le comportement d'affichage de l'element <p> .... et lui appliqué un display:inline-block et une largeur (au moins une largeur maximale : max-width) .

Enfin , donné vertical-align:middle; a img et p pour qu'il s'aligne en leur centre vertical l'un l'autre.

IE7 , necessite un commentaire conditionnel pour forcé son contexte de formatage , pour p ce sera donc pour IE7 et moins : display:inline;zoom:1;

(deja vue et recurent sur le forum)

Cordialement
GC

Bonsoir,

Merci pour ces précieux conseils

Ryo

tiens justement un tuto vient de sortir sur l'alignement vertical dans la section apprendre du site , cependant , je te conseille de faire usage des commentaire conditionnel pour IE7 et appliquer le display:inline;zoom:1;
et eviter les selecteurs css utiliser dans la demo du tutoriel (interessant a connaitre)
ou le height:1%; qui peut te jouer un mauvais tour si le parent a une hauteur determiné ...

La correction sera externe et ciblera uniquement le(s) navigateurs qui en ont besoin et ne risquera pas de se trouver anéantie par une regle css ajouter , modifier ou enlever plus tard ... . Pour ne pas l'oublier , il suffit de rajouter un commentaire dans les 2 feuilles de styles la ou elle est utilisée et pour quel effet .

GC

Bonjour,

Peut être "hérétique" mais un petit <table> simplifie parfois bien les choses en attendant mieux:)