雅虎邮件布局中心按钮答案

【问题标题】：Yahoo mail layout center button雅虎邮件布局中心按钮
【发布时间】：2018-05-27 02:06:03
【问题描述】：

我的一封邮件中有以下 html：

<center>
  <table class="button">
    <tbody>
      <tr>
        <td>
          <a href="#">Set Now</a>
        </td>
      </tr>
    </tbody>
  </table>
</center>

问题在于，在 Gmail 上，这个 Set Now 按钮正确居中，但在 Yahoo 上，它与左侧对齐。这是显示问题的图片：

【问题讨论】：

What's the best way to center your HTML email content in the browser window (or email client preview pane)?的可能重复

标签： html css email html-email

【解决方案1】：

试试下面的代码：

<td align="center">
    <a href="#">Set Now</a>
</td>`

【讨论】：

【解决方案2】：

嵌套另一个<table> 比使用<center 更安全>。这应该涵盖您的所有基础：

<td style="text-align: center;">

    <table class="button" align="center" style="margin: auto">
        <tbody>
            <tr>
                <td>
                    <a href="#">Set Now</a>
                </td>
            </tr>
        </tbody>
    </table>

</td>

【讨论】：

【解决方案3】：

试试

<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
  <tr>
    <td width="100%" align="center">
      <a href="#">Set Now</a>
    </td>
  </tr>
</tbody>

【讨论】：

【解决方案4】：

将 margin-left 和 margin-right 设置为 auto 到父表。像这样，

<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
  <tr>
    <td>
      <a href="#">Set Now</a>
    </td>
  </tr>
</tbody>

虽然我必须说，仅将锚标记设置为按钮并不能在所有电子邮件客户端上工作，但您可能应该使用从这里生成的代码https://buttons.cm/

【讨论】：