表劃分圖像和文本垂直對齊

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