html - 如何仅使用内联样式对齐表格行中图像链接旁边的文本链接？

Question

我在对齐表格行中彼此相邻的文本和图像链接时遇到问题。图像不断上下漂移。我尝试了各种对齐中间和显示 block 样式，但没有成功。我仅限于仅内联 CSS 并尝试在不同设备和桌面电子邮件客户端上正确显示。发布的代码是一个嵌套表，我无法让元素相互对齐。在浏览器中查看代码，大部分情况下都能正确显示。但是一旦代码出现在 Outlook 和其他程序中，图像就会在行内漂移。

image example

<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11"></a>
</td>
</table>

Answer 1

这非常简单，当使用 Litmus 进行测试时，它在所有电子邮件客户端中都具有一致的结果。我将字体大小、行高和图像大小设置为 13px。因为他们都是平等的，所以更容易对齐。我没有在表格上对齐，因为它应该默认为中间对齐。在我放置的图像上 vertical-align: -2px;在使用像 middle 这样的值时，Outlook 有错误的支持，但不是数字值。在样式表中添加 display: inline-block; .我把所有东西都放在一个<td> .

使用 Gmail、Apple、IOS、Android 和其他电子邮件客户端，一切都保持一致。在 Outlook 中，它会移动大约一个像素。

我还添加了 text-decoration: none;到 hrefs 来清理一下外观。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
  <tr>
    <td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
      <a href="tel:5555555555" style="font-size: 13px; text-decoration: none;">555-555-5555</a> | 
      <a href="https://stackoverflow.com" style="font-size: 13px; text-decoration: none;">stackoverflow.com</a>  | 
      <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13"></a>
    </td>
  </tr>
</table>

祝你好运。