电子邮件模板中心对齐徽标旁边的文本

Question

我正在为电子邮件模板创建如下所示的 header。如您所见，文本稍微偏离了电子邮件的中心。发生这种情况是因为我有两个 table 单元格：一个用于徽标，另一个用于文本。我可以在其单元格内将文本居中，但由于徽标单元格占用 74 像素，该单元格不是宽度的 100%。我可以在大多数电子邮件客户端中使用 margin-left 将 header 向左移动，但 Outlook 和 Gmail 都不支持边距，我需要同时支持这两个客户端。我怎样才能让文本在 Outlook 和 Gmail 中居中？

<body style="padding:0; margin:0">
  <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
    <tr>
      <td align="center" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
          <tr>
            <td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
              <!--[if gte mso 9]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
                <v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
                <v:textbox inset="0,0,0,0">
              <![endif]-->
              <div>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
                  <tr>
                    <td width="74px" align="center" style="padding-top: 10px;">
                      <div style="width:44px">
                        <img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
                      </div>
                    </td>
                    <td width="*%" align="center">
                      <h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
                      <h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
                    </td>
                  </tr>
                </table>
              </div>
              <!--[if gte mso 9]>
                </v:textbox>
              </v:rect>
              <![endif]-->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

Answer 1

我花了一点时间才理解你的问题，但我想我明白了。您希望文本在外部 table 内居中，而不管徽标在那里，对吗？如果是，那么只需在文本右侧添加另一个 74px 块即可。

看看代码看看我做了什么：

  <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
    <tr>
      <td align="center" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
          <tr>
            <td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
              <!--[if gte mso 9]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
                <v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
                <v:textbox inset="0,0,0,0">
              <![endif]-->
              <div>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
                  <tr>
                    <td width="74px" align="center" style="padding-top: 10px;">
                      <div style="width:44px">
                        <img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
                      </div>
                    </td>
                    <td width="*%" align="center">
                      <h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
                      <h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
                    </td>
                    <td width="74px" align="center">&nbsp;
                    </td>
                  </tr>
                </table>
              </div>
              <!--[if gte mso 9]>
                </v:textbox>
              </v:rect>
              <![endif]-->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

干杯

电子邮件模板中心对齐徽标旁边的文本

Email template center align text next to logo

html-email