Как лучше всего центрировать содержимое электронной почты 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 поддерживается не всеми почтовыми клиентами.

Тем не менее, используйте HTML Transitional DOCTYPE, а не 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 = «center».

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