如何实现HTML邮件模板中指定footer页脚元素的居中显示

HTML邮件footer居中解决方案 #

你原有写法不生效的核心原因有两点：

1. <footer text-align="center">属于错误写法，text-align是CSS属性，不能直接作为HTML原生属性使用
2. 多数邮件客户端对<footer>语义标签支持度差，且你内层的table缺失标准的<tr>、<td>结构，样式识别效率极低

优化后兼容全邮件客户端的代码：

<table cellspacing="0" cellpadding="0" border="0" align="center" 
    bgcolor="#ffffff" width="600" class="email-container">
  <table align="center" width="600" class="email-container">
    <!-- 补充标准表格结构，双属性控制居中兼容不同客户端 -->
    <tr>
      <td align="center" style="text-align: center;">
        <footer style="width: 100%; margin: 0 auto; text-align: center;">
          <p class="style2" style="text-align: center;margin: 0 0 12px 0;">
            <br />
            Klik <a href="^OptOut:ProjectLink^">her</a>, hvis du ikke 
            ønsker at modtage flere invitationer til undersøgelsen.&nbsp;
          </p>
          <p class="style2" style="text-align: center;margin: 0 0 12px 0;">
            XX afdækker hvert år kundernes oplevelser i en række 
            forskellige brancher. <a href="^OptOut:PanelLink^">Klik 
            her</a>, hvis du ønsker at afmelde alle invitationer til XXs 
            undersøgelser fremover.
          </p>
          <p class="style2" style="text-align: center;margin: 0 0 12px 0;">
            XX gennemfører XX. Ved at påbegynde din besvarelse accepterer 
            du, at vi må indsamle og behandle dine data i henhold til 
            <a href="https://survey.euro.confirmit.com/isa/POADCB/AutoIndex/autoindex_dk_samtykke_confirmit.html"              
              target="_blank" rel="noopener">dette samtykke</a>. 
              Det er frivilligt at deltage i undersøgelsen.
            </p>
          <p class="style2" style="text-align: center;"> </p>
        </footer>
      </td>
    </tr>
  </table>
</table>

核心修改点：

• 补全内层table的<tr>、<td>表格标准结构，给同时添加HTML原生属性align="center"和inline CSS text-align: center，覆盖所有主流邮件客户端的兼容要求
• 给
• 给所有footer内的段落标签添加inline居中样式，同时可选补充外边距控制段落间距，避免默认样式导致内容左对齐
• 如果不需要保留

HTML邮件所有样式建议都写为inline形式，避免多数客户端过滤内部样式表导致样式失效。

内容的提问来源于stack exchange，提问作者Kristine Kjær