Outlook.com中的按钮文本对齐 [英] Button Text Alignment in Outlook.com

问题描述

仅在Outlook.com中发现奇怪的行为，并带有用于电子邮件构建的按钮文本对齐方式.由于某种原因，它与按钮的顶部对齐，而不是位于按钮的中间.无法弄清楚为什么.任何见解都表示赞赏.

Finding a strange behavior only in outlook.com with a button text alignment for an email build. For some reason it's aligned to the top of the button instead of being in the middle. Unable to figure out why this is. Any insights appreciated.

感谢您的时间和想法.

下面的代码段和CTA图片链接.

Code snippet and CTA image link below.

    <table cellpadding="0" cellspacing="0" border="0"  >
     <tr>
      <td style="padding: 0px 0px 0px 0px;  background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle"><a href="#" style="text-decoration:none; padding: 12px 20px 10px 20px;  background-color:#989b98; color:#e4008f; cursor: pointer; display: block; border: 1px solid #989b98; min-width: 220px; font-weight: bold;  outline: none;" target="_blank">16pxXXXX XXXXX XXXXX</a></td>
     </tr>
    </table>

推荐答案

我首先要回顾> ，以便了解不同的电子邮件客户端如何使用CSS进行响应.

I would first start off by reviewing this asset for anything "email" related in order to get an understanding of how different email clients react with CSS.

您会注意到Outlook中不支持 display 的方式，这将导致锚标记无法使用填充.我建议通过以下方式对电子邮件按钮进行编码:

You will notice how display is not supported in Outlook which would result in your anchor tag not being able to use padding. I would recommend coding an email button the following way:

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
    <tr>
        <td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
            <a href="#" style="color: #e4008f; text-decoration: none; outline: none; border: none;" target="_blank">16pxXXXX XXXXX XXXXX</a>
        </td>
    </tr>
</tbody>
</table>

不幸的是，这仅使文本可单击，而不是整个按钮可单击，但这将是您的最佳选择，以使其在所有其他电子邮件客户端中保持一致，而无需创建图像.

This unfortunately only makes the text clickable and not the entire button, but it's going to be your best option in order to make it consistent across all other email clients without having to create an image.

这篇关于Outlook.com中的按钮文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！