0

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

这是完整的代码（小提琴）：

<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>

4

4 回答 4

4

就我个人而言，我喜欢将我的整个正文内容（甚至是响应式电子邮件上的移动版本）包装在一个 100% 宽度的表格中（gmail 可能会剥离它，但无论如何它都会假设 100%）。诀窍是 td 的对齐中心。前任-

<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

于 2013-09-09T16:21:26.720 回答
3

当我检查 Litmus 时，您的代码运行良好。我唯一担心的是您可能需要在以下内容中添加“text-align:left”以使副本在 Gmail/IE 上与左侧对齐。

<p style="font-family: Georgia, serif; text-align: left;">Body</p>
于 2013-02-28T20:35:44.290 回答
0

您是否尝试将 text-align css 样式添加到 body 的 p 元素？

<p style="font-family: Georgia, serif;text-align:center;">Body</p>

您将 p 居中在单元格内，但不是其内容。或者删除 p 标签。

于 2013-02-28T20:15:11.673 回答
0

感谢您的建议，但经过进一步调查，我发现 Gmail 实际上是width="100%"从外部表中剥离属性。目前，我认为没有任何方法可以让 Gmail 窗口中的内容居中。

于 2013-02-28T20:27:42.320 回答