Question

我在html电子邮件中包含以下行，并且我想知道将其中包含图像的锚定标签居中的最佳方法是什么？发送到gmail应用时无济于事。

<tr>
      <td style="vertical-align:middle;">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td><span style=
            "display:block;text-align: center;width:100%; margin:0 0 10px 0;font:12px/16px 'Open Sans', Arial, Helvetica, sans-serif;color:#797c82">
            Follow us on test:</span></td>
          </tr>

          <tr>
            <td align="center" style=
            "font:12px/16px 'Open Sans', Arial, Helvetica, sans-serif;color:#797c82;padding:0 0 0px;text-align:center;vertical-align:middle;">
            <center>
                <a target="_blank" style=
                "text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:.02em;display:inline-block;vertical-align:middle;padding:0 10px 0 10px;"
                href="https://www.facebook.com/crisalix/"><img src=
                "https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png"
                border="0" vspace="0" hspace="0" width="40" height="40" alt=
                "8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png" /></a> <a target="_blank"
                style=
                "text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:.02em;display:inline-block;vertical-align:middle;padding:0 10px 0 10px;"
                href="https://www.instagram.com/crisalix/"><img src=
                "https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c658470a-038f-4e90-8bc0-baae91b6ae41.png"
                border="0" vspace="0" hspace="0" width="40" height="40" alt=
                "crisalix.com" /></a> <a target="_blank" style=
                "text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:.02em;display:inline-block;vertical-align:middle;padding:0 10px 0 10px;"
                href="https://twitter.com/3Dsimulations"><img src=
                "https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c541f4de-ced2-4eee-a10b-3c97f63fba04.png"
                border="0" vspace="0" hspace="0" width="40" height="40" alt=
                "crisalix.com" /></a>
              </center>
            </td>
          </tr>
        </table>
      </td>
    </tr>

Answer 1

我有几个建议，希望其中一个可以解决问题–电子邮件的HTML没什么好玩的：

将您的代码段中的align="center"添加到第一个<td>
将您的代码段中的align="center"添加到第一个<table>
删除<center>标签
从链接中删除display: inline-block;
确保第一个<a>在开头<td>之后开始

像这样：

<tr>
  <td style="vertical-align:middle;" align="center">
    <table width="100%" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td><span style="display:block; text-align:center; width:100%; margin:0 0 10px 0; font:12px/16px 'Open Sans', Arial, Helvetica, sans-serif; color:#797c82;">
            Follow us on test:</span></td>
      </tr>
      <tr>
        <td align="center" style="font:12px/16px 'Open Sans', Arial, Helvetica, sans-serif;color:#797c82;padding:0 0 0px;text-align:center;vertical-align:middle;">
          <a target="_blank" style="text-decoration:none; color:#222;text-transform:uppercase; font-weight:500;letter-spacing:.02em; vertical-align:middle; padding:0 10px 0 10px;" href="https://www.facebook.com/crisalix/"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png" /></a>
          <a target="_blank" style="text-decoration:none; color:#222; text-transform:uppercase; font-weight:500; letter-spacing:.02em; vertical-align:middle;padding:0 10px 0 10px;" href="https://www.instagram.com/crisalix/"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c658470a-038f-4e90-8bc0-baae91b6ae41.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com" /></a>
          <a target="_blank" style="text-decoration:none;color:#222; text-transform:uppercase; font-weight:500; letter-spacing:.02em; vertical-align:middle; padding:0 10px 0 10px;" href="https://twitter.com/3Dsimulations"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c541f4de-ced2-4eee-a10b-3c97f63fba04.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com" /></a>
        </td>
      </tr>
    </table>
  </td>
</tr>

如何将HTML电子邮件中的多个链接居中

1 个答案: