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

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

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

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

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


html alignment css html-table
person s4y    schedule 30.07.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

<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, поэтому я открыт для других идей.

person s4y    schedule 30.07.2010

arrow_upward
1
arrow_downward

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

<table border="1" cellspacing="5" cellpadding="5"> 
 <tr> 
  <td> 
   <img style="float: left;" width="20" height="20">Text 
  </td> 
  <td> 
   Text 
  </td> 
 </tr> 
</table>
person timmyc    schedule 30.07.2010
comment
Спасибо!. Это ближе, но не совпадает: i.imgur.com/CXFZc.png (я выбил границы и интервалы, чтобы сделать разницу более очевидной). - person s4y; 30.07.2010
comment
Хорошо, я думал, что у меня это есть, но это зависит от браузера. Неважно. Прости. - person timmyc; 31.07.2010