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


93

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

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

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

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


2
"margin: 0px auto" .. просто FYI, коли ви використовуєте що 0-небудь, вам не потрібно вказувати одиницю :)
Метт

Відповіді:


211

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

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

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


Чи існує властивість CSS, яка робить те саме? text-align: centerне робить те саме.
Sawtaytoes

1
Деякі постачальники послуг електронної пошти вимагають цього застарілого методу центрування об’єктів. (Я думаю про Apple Mail).
Дразза

84
Коли ви кодуєте макети електронної пошти, ви буквально кодуєте, наче 1999 рік.
Капітан Гіпертекст,

Це призводить до того, що дочірні таблиці мають центровані значення tds і в Outlook Web App (OWA), незалежно від того, встановлено для них вирівнювання leftчи ні.
Ізмаїл

30

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

Ось посилання, яке я завжди використовую, коли мені потрібно пройти через біль впровадження 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>

6
Не працює, якщо ви центруєте таблицю або інший елемент рівня блоку.
Роман

Ви маєте рацію, я не впевнений, чи margin: 0 auto;підтримується (у поєднанні з a width), але це, як правило, працює для браузерів, але я не впевнений, чи добре поєднуються в цій ситуації клієнти електронної пошти.
Justus Romijn,

2
Так, я не був впевнений, чи всі браузери його підтримають, тому пішов із надійним, але застарілим тегом <center>.
Роман

10

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

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

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

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

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

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


7

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

<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)


1
Маленький невидимий "період" слід замінити на, можливо, & nbsp; а вказівки зробити маленький невидимий період невидимим слід відкинути. Я навіть не міг отримати тестовий електронний лист із цими налаштуваннями, оскільки вони потрапили прямо до мого провайдера, який захищав спам :) Захист від шкідливого програмного забезпечення робить що-небудь рибний запах навіть рибнішим ... наприклад: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
Techmag

6

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

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


5

Я боровся з 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/

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


Дякую, це спрацювало для мене. Я намагався
відцентрувати

2

У деяких випадках 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>

1
Навіщо використовувати tableдля цього a, якщо буде лише один рядок і один стовпець? Ви не використовуєте жодних особливостей tableелемента.
dg99

ви використовуєте таблицю в HTML-адресі електронної пошти, оскільки вирішення будь-якої проблеми з HTML-
user254694
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.