Який найкращий спосіб відцентрувати вміст електронної пошти HTML у вікні браузера (або панелі попереднього перегляду клієнта електронної пошти)?

Зазвичай я використовую правила CSS margin:0 autoразом із контейнером 960 для мого стандартного вмісту на основі браузера, але я новачок у створенні електронної пошти HTML, і я маю такий дизайн, який я хотів би тепер відцентрувати у вікні браузера без стандартного CSS .

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

Здається, я пам’ятаю, що я десь бачив, що це також можна досягти, обернувши дизайн таблиці електронної пошти у зовнішню таблицю, встановлену width:100%та використовуючи якийсь вбудований стиль для text-align:centerна тілі, або щось подібне для цього?

Чи є для цього найкраща практика?

Вирівняйте стіл по центру.

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

Якщо у вас є "ваш вміст", якщо це таблиця, встановіть його на потрібну ширину, і ви отримаєте вміст у центрі.

Для гуглерів та повноти:

Ось посилання, яке я завжди використовую, коли мені потрібно пройти через біль впровадження HTML-шаблонів електронної пошти або підписів: http://www.campaignmonitor.com/css/

Я перелічую підтримку CSS для більшості, якщо не всіх, варіантів CSS, чудово порівняний між деякими найбільш використовуваними поштовими клієнтами.

Для центрування не соромтеся просто використовувати CSS (оскільки alignатрибут застарілий у HTML 4.01).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

table align = "center" ... це вирівнює центр таблиці сторінки.

Використання td align = "center" центрує вміст всередині цього td, корисно для вирівняного тексту, але у вас будуть проблеми з тим, що деякі поштові клієнти центрують вміст у таблицях підрівнів, тому використання td align як методу верхнього рівня центрування "контейнера" таблиця на сторінці - це не спосіб це зробити. Замість цього використовуйте вирівнювання таблиці.

Тим не менш використовуйте свою 100% таблицю обгортки теж, суто як обгортку для тіла, оскільки деякі поштові клієнти не відображають кольори тла тіла, але вони відображатимуться у таблиці 100%, тому додайте колір тіла як до тіла, так і до 100 % таблиця.

Я міг би продовжувати і продовжувати віками про всі примхи HTML-розробки електронної пошти. Все, що я можу сказати, - це тестовий тест і тест ще раз. Litmus.com - чудовий інструмент для тестування електронних листів.

Чим більше ви робите, тим більше ви дізнаєтесь про те, що працює в яких поштових клієнтах.

Сподіваюся, це допомагає.

Ось ваше куленепробивне рішення:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

Просто спробуйте, виглядає трохи брудно, але це працює навіть з новим оновленням Firefox для пошти Yahoo. (не центрує електронну пошту, оскільки замініть основну таблицю на div)

CSS в електронних листах - це біль. На жаль, вам, на жаль, знадобляться таблиці, оскільки CSS не сильно підтримується в усіх поштових клієнтах.

Тим не менш, використовуйте перехідний DOCTYPE HTML, а не XHTML, і використовуйте <center>.

Я боровся з Outlook та Office365. Дивно, але те, що, здавалося, спрацювало:

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

Я перерахував лише деякі ключові речі, які вирішили мої проблеми з електронною поштою Microsoft.

Чи можу я додати, що створення електронного листа, який добре виглядає на всіх електронних листах, - це проблема. Цей веб-сайт був дуже приємний для тестування: https://putsmail.com/

Це дозволяє вам перерахувати всі електронні листи, на які ви хочете надіслати тестове повідомлення. Ви можете вставити свій код прямо у вікно, редагувати, надсилати та повторно відправляти. Це мені допомогло тонну.

У деяких випадках margin = "0 auto" не зріже гірчицю при вирівнюванні HTML-повідомлення електронної пошти в Outlook 2007, 2010, 2013.

Спробуйте наступне:

Оберніть свій вміст в іншу таблицю з style = "table-layout: fixed;" та align = "центр".

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>