html - 表格分割图文垂直对齐

Question

我正在尝试使图像和文本(信息编号和邮件)处于同一垂直对齐状态，但不起作用。

我已经在 td 中尝试了 line-height 的 22px 和 vertical-align 但不是工作和我现在感觉很无能!

<table width="500">
  <tbody>
    <tr>
      <td style="font-family: Helvetica, arial, sans-serif; font-size: 11px;color: #4C4D4D;line-height:22px;vertical-align:middle;"><p><a href="#" target="_blank" style="margin-right:5px;"><img src="img/Phone-Ico.png" width="22" height="22" alt=""></a>+57 (1) 7026202</p></td>
      <td style="font-family: Helvetica, arial, sans-serif; font-size: 11px;color: #4C4D4D;line-height:22px;vertical-align:middle;"><p><a href="#" target="_blank" style="margin-right:5px; margin-left: 5px;"><img src="img/Whatsapp-Ico.png" width="22" height="22" alt=""></a>+57 (1) 7026202</p></td>
      <td style="font-family: Helvetica, arial, sans-serif; font-size: 11px;color: #4C4D4D;line-height:22px;vertical-align:middle;"><p><a href="#" target="_blank" style="margin-right:5px; margin-left: 5px;"><img src="img/Mail-Ico.png" width="22" height="22" alt=""></a>banano@adsmovil.com</p></td>
      <td style="font-family: Helvetica, arial, sans-serif; font-size: 11px;color: #4C4D4D;line-height:22px;vertical-align:middle;"><p><a href="#" target="_blank" style="margin-right:5px; margin-left: 5px;"><img src="img/Skype-Ico.png" width="22" height="22" alt=""></a>banano2000</p></td>
    </tr>
    <tr>
      <td>
        <p style="font-family: Helvetica, arial, sans-serif; font-size: 11px;color: #4C4D4D;"> Bogotá, Colombia </p></td></tr>
  </tbody>
</table>

Here's how it looks right now.

Answer 1

将图像的 vertical-align 属性设置为 middle 或 bottom。

例如:

a img {
    vertical-align: middle;
}