Question

制作了一个时事通讯按钮

虽然它应该在Outlook上正确显示，但文本不是垂直居中，而是略微与底部对齐。

按钮的原始代码：

<td align="center" width="70%">      
<div><!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9">
        <w:anchorlock/>
        <center>
      <![endif]-->
          <a href="http://"
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a>
      <!--[if mso]>
        </center>
      </v:roundrect>
    <![endif]--></div>
</td>

它应该如何看（例如，如何看待Mail）：

它如何看待Outlook：

我尝试将高度和行高值更改为ems或％而不是像素，添加mso-line-height-rule:exactly属性，将行高添加到td而不是{{1标签......没有运气！

Answer 1

这是我能通过电子邮件中的VML获得最接近Outlook的内容。它不是完全垂直的中心，但是很接近。

我更改了VML，以在VML内部的roundrect标签内包含按钮的文本和链接，而不是使用两者的a标签。这样可以更好地与Outlook兼容，因为它使用的是VML（一种微软语言）而不是HTML，需要Word重写/翻译它。这与一些小的调整（例如设定一个定义的宽度）相结合产生了最接近垂直对齐的方式。 VML提供了许多样式和其他选项，但并非所有选项都转换为电子邮件/ Outlook，因此如果您研究VML，请记住这一点。：

<td align="center" width="70%">      
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t">
    <v:fill type="tile" color="#0072b9" />
    <w:anchorlock/>
    <center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center>
  </v:roundrect>
      <![endif]-->
          <a href="http://"
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a>
</div>
</td>

Answer 2

根据W3Schools，align属性定义了单元格中内容的水平和非垂直对齐。

W3Schools指定可以使用valign属性

定义单元格中内容的垂直对齐方式

<td align="center" valign="middle" width="70%">

或者，您可以使用定义为内联样式的vertical-align css属性将元素垂直居中于其父容器中。

您可能需要使用上述方法中的一种或另一种或两种，具体取决于您要定位的邮件客户端。检查哪些邮件客户端支持哪些元素，网上有大量参考资料heres one，您可以找到更好的信息。

Answer 3

mso-text-raise样式将帮助您实现正确的垂直对齐

Outlook

3 个答案: