Alignement vertical : Image - Texte

Autrement dit comment faire cela :

test image mabweb09 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed non risus. Rien de plus facile l'image et le texte étant 2 éléments inline il suffit d'utiliser vertical-align : middle

Le code xhtml :

<img class="verti" src="../../images/soleil.jpg" alt="test image mabweb09" 
width: 150px height: 150px>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Le code css :

 
img.verti {
    vertical-align: middle;
    margin: 10px;
}

Malheureusement vertical-align est à utiliser dans des cellules de tableaux ou dans des éléments inline.
Donc si on utilise des flottants cela ne marche pas.

test image mabweb09 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed non risus.Donec nisl metus, vehicula id, tincidunt at, aliquet et, sem.

Le code xhtml :

<img class="fdroit" src="../../images/triste.jpg" alt="test image mabweb09" 
width: 150px height: 150px>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Le code css :

 
img.fdroit { 
    float: right; 
    vertical-align: middle; 
}

Il faudra donc trouver une alternative au comportement flottant puisque le float fait passer la valeur de display à block.

Ce problème peut être réglé de 2 façons
(Les articles suivants sont le résumé de ce que j'ai pu trouver sur internet)

Par tableaux

Par inline-block

visiteurs

Contact