Question

我正在为电子邮件模板创建如下所示的标题。如您所见，文本略微偏离电子邮件的中心。这是因为我有两个表格单元格：一个用于徽标，另一个用于文本。我可以将文本放在其单元格中心，但由于徽标单元占用了74像素，因此该单元格不是100％的宽度。我可以在大多数电子邮件客户端使用margin-left将标题移到左侧，但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

我花了一点时间来理解你的问题，但我想我明白了。无论徽标在哪里，您都希望将文本置于外部表格中心，对吧？如果那是肯定的，那么只需在文本右侧添加另一个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>

干杯

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

1 个答案: