我正在重温基于表格的布局的辉煌岁月,因为我正在写一封 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/