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

Table Division Image and Text vertical Align

1 个答案: