图像符合文本

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>