表划分图像和文本垂直对齐

Question

我试图让图像和文本在同一垂直对齐（信息编号和邮件），但不工作。

我试过在td的22pxline-height和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; 
}