与图像垂直对齐文本答案

【问题标题】：Vertical text alignment alongside images与图像垂直对齐文本
【发布时间】：2017-01-17 20:51:53
【问题描述】：

当我将图像内嵌在表格单元格中时，如下所示：

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

…它会改变该单元格中文本的垂直对齐方式，如下所示：

我玩过vertical-align，但无法在两个单元格中对齐。这样做的正确方法是什么？

【问题讨论】：

标签： html css html-table alignment

【解决方案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 中，所以我仍然对其他想法持开放态度。

【讨论】：

【解决方案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>

【讨论】：

谢谢！。这更接近，但未对齐：i.imgur.com/CXFZc.png（我敲掉了边框和间距以使差异更加明显）。
好的，我以为我拥有它，但依赖于浏览器。没关系。对不起。