Table Division Image and Text vertical Align

Question

I'm trying to have an image and text in the same vertical align (Info numbers and mail) but is not working.

I've tried line-height of 22px and vertical-align in the td but is not working and I'm feeling clueless now!

<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

Set the vertical-align property of your images to either middle or bottom.

For example:

a img {
    vertical-align: middle;
}