Comment aligner verticalement du texte et une image flottante dans une cellule de tableau?

Question

Comment puis-je centrer verticalement text on 1 line? Le texte peut changer, donc je veux une solution générique.

Exemple ici: http://jsfiddle.net/rfECj/

HTML:

<table> 
    <tr> 
     <td> 
      <img src="img.png"/> 
      text on 2 lines text on 2 lines text on 2 lines 
     </td> 
     <td> 
      <img src="img.png"/> 
      text on 2 lines text on 2 lines text on 2 lines 
     </td> 
     <td> 
      <img src="img.png"/> 
      text on 1 line 
     </td> 
    </tr> 
</table> 

CSS:

table img { 
    margin: 4px 6px 0 6px; 
    float: left; 
} 

table tr td { 
    width: 180px; 
} 

Answer 1

La seule solution qui vient à l'esprit est d'utiliser plus TDs, un pour l'image , un pour le texte.

http://jsfiddle.net/rfECj/5/

Answer 2

Difficile à dire si c'est ce que vous voulez de la question, mais vous pouvez utiliser vertical-align, qui travaille sur td s.

table tr td { 
    width: 180px; 
    border:1px solid red; //just to see it better 
    vertical-align:middle; // add this 
} 

http://jsfiddle.net/rfECj/9/

Answer 3

quoi que ce soit de mal à utiliser vertical-align: middle;?