将发送到 Gmail 客户端的电子邮件居中答案

【问题标题】：Center an email sent to Gmail client将发送到 Gmail 客户端的电子邮件居中
【发布时间】：2013-08-05 12:33:24
【问题描述】：

首先，请原谅我的英语和我的 html，我既不是英语也不是开发人员。我正在尝试为我的客户构建一个 HTML 邮件，他们希望通过复制/粘贴在他们的 Gmail 客户端中发送它。我从 mailchimp 下载了一个模板并对其进行了自定义。 HTML 看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



    <title>*|MC:SUBJECT|*</title>

<style type="text/css">
    #outlook a{
        padding:0;
    }

    body{
        width:100% !important;
    }
    .ReadMsgBody{
        width:100%;
    }
    .ExternalClass{
        width:100%;
    }
    body{
        -webkit-text-size-adjust:none;
    }
    body{

        margin:0;
        padding:0;
    }
    img{
        border:0;
        height:auto;
        line-height:100%;
        outline:none;
        text-decoration:none;
    }
    table td{
        border-collapse:collapse;
    }
    #backgroundTable{
        height:100% !important;
        margin:0;
        padding:0;
        width:100% !important;
    }

    body,#backgroundTable{
        background-color:#FAFAFA;
    }

    #templateContainer{
        border:1px solid #DDDDDD;
    }
</style></head>
<body align="center">
    <center>
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" align="center">
            <tr>
                <td align="center" valign="top">

                    <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
                        <tr>
                            <td valign="top" class="preheaderContent">


                                <table border="0" cellpadding="10" cellspacing="0" width="100%">

                                </table>


                            </td>
                        </tr>
                    </table>

                    <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
                        <tr>
                            <td align="center" valign="top">

                                <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
                                    <tr>
                                        <td class="headerContent">

                                            </br>
                                            <img src="http://gallery.mailchimp.com/7243c1f17089e9e1ebba4fe7e/images/logo_couleur.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext>


                                        </td>
                                    </tr>
                                </table>

                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">

                                <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
                                    <tr>
                                        <td valign="top">
                                            <table border="0" cellpadding="0" cellspacing="0" width="600">
                                                <tr>
                                                    <td valign="top" class="bodyContent">


                                                        <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                                            <tr>
                                                                <td valign="top">
                                                                    <div mc:edit="std_content00">

内容等

当我复制/粘贴它并使用 gmail 发送它时，它会在我的手机上正确呈现，但电子邮件不是 gmail 客户端的中心。

任何帮助将不胜感激！

非常感谢。

【问题讨论】：

您必须使用内联样式 - gmail 会删除任何样式表或样式标签。也要小心你的表格嵌套 - 我听说有些客户不会渲染 3 深的表格

标签： html gmail center

【解决方案1】：

最好的方法是嵌套表格。

拥有一个以子表为中心的包装表。

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
    <td align="center">

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
    <tr>
    <td>
        YOUR EMAIL CONTENT GOES HERE
    </td>
    </tr>
    </table>

    </td>
    </tr>
</table>

此外，gmail 是一个反复无常的邮件客户端。如果您有黑色链接，则需要使用 #000001，否则 gmail 会将这些链接呈现为默认的蓝色。

确保您的所有图像都显示为没有边框的块元素，否则它会在每个图像周围添加空白，甚至是分隔符。

如果您不希望电话号码在 gmail 上默认可点击，则需要将它们包装到空锚标记中。

还有 html-email 的一条黄金法则：内联样式。

希望这会有所帮助！ :)

【讨论】：

很高兴我能帮上忙！ :)