html - 图片与文字一致

Question

我有一个表格单元格，其中包含文本和图像图标。图像图标占据了单元格的高度，这使得文本下降到底部：

现在，我希望文本将自身定位在单元格的中间：

祈祷，我怎么能做到这一点？通常的填充和边距修复似乎不起作用。我的代码如下：

<td class="title">
     <div style="display:inline-block;">Blah blah</div> 
      <a href="#"><img src="img.png" width="68" height="34" alt="Imange"></a>
</td>

Answer 1

关键是让你line-height的图像的高度，然后vertical-align用来调整文本的垂直位置：

.title {
    line-height: 34px;
    vertical-align: middle;
}

Answer 2

只需将 vertical-align:middle 作为样式添加到您的 img 标签，如下所示：

<td class="title">
 <div style="display:inline-block;">Blah blah</div> 
  <a href="#"><img src="img.png" width="68" height="34" alt="Imange" style="vertical-align:middle;"></a>