如何用HTML/CSS居中邮件模板内的按钮？求技术帮助

云原生阿岚

2026-8-3

解决弃购邮件模板中按钮居中的问题

针对你用旧版HTML/CSS邮件模板修复弃购邮件时遇到的按钮居中问题，直接基于现有代码结构微调即可——之前评论区代码导致布局乱掉，就是因为你直接替换了原有表格，破坏了模板的row/column布局体系，具体修改方法如下：

核心修改步骤

邮件客户端对CSS支持有限，优先用HTML原生属性实现居中更可靠：

在包含按钮表格的父容器<th class="column">上添加align="center"属性，让内部的按钮表格整体居中
保留原模板的row/column层级结构，不要替换整个按钮表格

修改后的完整代码片段

<table class="row">
    <tr>
        <th class="column" align="center"> <!-- 新增align="center"属性 -->
            <table class="complete-order">
                <tr>
                    <th>
                        <p>
                            <a href="{{notification.checkout_link}}" target="_blank">
                                {{lang 'complete_order'}}
                            </a>
                        </p>
                    </th>
                    <th class="expander"></th>
                </tr>
            </table>
        </th>
    </tr>
</table>
</td>
</tr>
</table>