Как центрировать несколько ссылок в электронных письмах HTML - PullRequest
Новая
       7

Как центрировать несколько ссылок в электронных письмах HTML

0 голосов
/ 09 ноября 2018

У меня есть следующая строка в 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>

1 Ответ

0 голосов
/ 09 ноября 2018

У меня есть несколько предложений, и я надеюсь, что одно из них решит проблему - HTML для электронных писем неинтересен:

  1. добавьте align="center" к первому <td> из вашего фрагмента
  2. добавьте align="center" к первому <table> из вашего фрагмента
  3. Удалить тег <center>
  4. Удалить display: inline-block; из ссылок
  5. Убедитесь, что первый <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>
...