如何在HTML邮件模板中实现按钮水平居中？

别担心，HTML邮件的样式兼容性确实容易踩坑，我帮你搞定这个按钮居中的问题～

首先看你当前的代码问题：父元素<p>设置了text-align:left，这直接让按钮左对齐了，而且邮件客户端对一些现代CSS属性的支持参差不齐，所以得用更兼容的方式来调整。

方案1：修改现有<p>标签的样式 #

把<p>的text-align改成center，同时调整宽度设置，确保父元素能撑满可用空间，这样按钮就能居中了：

<p class="product-link" style="text-align:center; width:100%; display:block; vertical-align:middle;">
  <span>
    <a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&amp;asins=[[PRODUCT_ASIN]]">Share your opinion</a>
  </span>
  <br>
</p>

方案2：用表格布局（更兼容所有邮件客户端） #

HTML邮件里表格是兼容性之王，尤其是面对Outlook这类对CSS支持较差的客户端，用表格包裹按钮是最稳妥的选择：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&amp;asins=[[PRODUCT_ASIN]]">Share your opinion</a>
    </td>
  </tr>
</table>

小提示 #

HTML邮件尽量避免依赖margin:auto、Flex布局这类现代CSS属性，很多老邮件客户端不支持。优先使用表格的align属性或者父元素的text-align:center来实现居中效果。

内容的提问来源于stack exchange，提问作者Christian Smith