html - 在 Gmail 中将 HTML 电子邮件正文居中

标签 html css email

我正在重温基于表格的布局的辉煌岁月,因为我正在写一封 HTML 电子邮件。不幸的是,我无法让主体在页面上居中(当然,它可以在浏览器中工作,但在通过 HTML Mails 在 Gmail 中进行测试时却不行。我希望嵌套在第一个 <td> 中的表格在外部表格中居中。内部表格设置为固定宽度,所以我希望它能工作。有什么想法吗?

这是完整的代码(fiddle):

<table width="100%">
<tr>
    <td width="100%" align="center">
        <table width="600" height="100%">
            <tr>
                <td width="100%">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
                                            <table cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="100" height="100">
                                            <img src="" width="100" height="100">
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
                                            <table cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table cellpadding="20">
                        <tr>
                            <td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;">
                                 <h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1>

                                <p style="font-family: Georgia, serif;">Body</p>
                            </td>
                        </tr>
                    </table>
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="50" height="50">
                                            <img src="" width="50" height="50" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

最佳答案

就我个人而言,我喜欢将我的整个正文内容(甚至我的响应式电子邮件的移动版本)包装在一个 100% 宽度的表格中(gmail 可能会删除它,但无论如何它都会假定为 100%)。诀窍是 td 的对齐中心。 ex-

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
    <tr valign="top">
        <td align="center">
            <table with whatever width you want your max width to be>
        </td>
    </tr>
</table>

您还可以为您的包装表分配一个bgcolor,这将为您的电子邮件提供背景颜色,即使在通常在body中去除背景颜色的网络邮件客户端也是如此。 p>

关于html - 在 Gmail 中将 HTML 电子邮件正文居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15144586/

相关文章:

css - div 容器附近的 div

css - 子 div 扩展出父 div 问题

html - 使用 CSS 进行复杂的表格布局

c# - 通过 asp.net 向多个用户发送邮件

html - 垂直对齐中间没有运气

html - CSS 条形图 : highlight every column of the same series on hover

css - 使用 top : 50% and transform: translate (-50%) causes doubled 1px underline 垂直居中

java - 使用 javax.mail 在邮件正文中发送编码图像

node.js - 为什么我的 firebase 回调被多次触发?

javascript - 如何只显示前 4 个 HTML 元素并隐藏其余元素?