垂直对齐不按预期的HTML工作

Question

我正在创建HTML电子邮件签名，由于某种原因，我在垂直垂直对齐图像和一些文本时遇到了问题。我正在通过打开Chrome/Gmail的HTML来查看我的签名，该HTML的作用相同，然后在Outlook中单独检查以检查兼容性问题。垂直对齐都无法使用，但输出的输出略有不同。

我希望解决方案，以垂直对齐图像并在中间垂直将镀铬/gmail和Outlook在中间放置。

我尝试了许多不同的垂直对齐方法，例如在各种元素上使用行高，垂直对齐，高度和显示属性，但它们没有任何区别。

以下是我的代码：

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;width: 600px; border-collapse: collapse;">
    <tr>
        <td cellspacing="0" cellpadding="0" border="0" width="180" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: left; font-size:16px; font-weight: 400; color: #000; padding: 0 0 0 20px;">
            <p style="margin: 0;"><img src="/assets/signature/phone.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> XXXXX XXXXXX</p>
        </td>
        <td cellspacing="0" cellpadding="0" border="0" width="240" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: center; font-size:16px; font-weight: 400; color: #000;">
            <p style="margin: 0;"><span style="text-decoration: none!important; color: #000!important;"><img src="/assets/signature/email.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> [email protected]</span></p>
        </td>
        <td cellspacing="0" cellpadding="0" border="0" width="180" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: right; font-size:16px; font-weight: 400; color: #000; padding: 0 20px 0 0;">
            <p style="margin: 0;"><img src="/assets/signature/web.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> www.domain.com</p>
        </td>
    </tr>
</table>

这是我在Chrome/gmail中的输出：

这是我在Outlook中的输出：

Answer 1

那：

table tr {
  display: flex;
  align-items: center;
}

？