Вертикальное выравнивание текста рядом с изображениями

Question

Когда я кладу встроенное изображение в ячейке таблицы, например:

<table border="1" cellspacing="5" cellpadding="5"> 
<tr> 
    <td> 
    <img width="20" height="20">Text 
    </td> 
    <td> 
    Text 
    </td> 
</tr> 
</table> 

... сдвигает вертикальное выравнивание текста в этой ячейке, например:

Я играл с vertical-align, но не смог выровнять их в двух ячейках. Каков правильный способ сделать это?

Answer 1

Я продолжает играть с этой проблемой, вот обходной путь я придумал:

<table border="1" cellspacing="5" cellpadding="5"> 
    <tr> 
     <td style="line-height: 20px;"> 
      <img width="20" height="20" style="vertical-align: top;">Text 
     </td> 
     <td> 
      Text 
     </td> 
    </tr> 
</table> 

Это делает так:

Я не «Мне нравится, что высота изображения должна быть в CSS, поэтому я все еще открыт для других идей.

Answer 2

Хорошо, как насчет ... это!

<table border="1" cellspacing="5" cellpadding="5"> 
<tr> 
    <td> 
    <img style="float: left;" width="20" height="20">Text 
    </td> 
    <td> 
    Text 
    </td> 
</tr> 
</table>