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;
}