Каков наилучший способ центрировать содержимое HTML-почты в окне браузера (или на панели предварительного просмотра клиента электронной почты)?

Question

Я обычно использую правила CSS для margin:0 auto вместе с контейнером 960 для моего стандартного содержимого на основе браузера, но я новичок в создании электронной почты в формате HTML, и у меня есть следующий дизайн, в котором я бы хотел теперь сосредоточиться окно браузера без стандартного CSS.

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

Кажется, я вспоминал, что где-то видел, что это также может быть достигнуто, оборачивая ваш дизайн таблицы электронной почты во внешнюю таблицу, установленную на width:100%, и используя некоторый встроенный стиль для text-align:center на tbody или что-то подобное, чтобы сделать это?

Есть ли лучшая практика для этого?

Answer 1

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

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

Если у вас есть «ваш контент», если это таблица, установите желаемую ширину, и вы получите центрированный контент.

Answer 2

Для гуглов и ради полноты:

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

Answer 3

table align = "center" ... это выравнивает центр таблицы на странице.

Использование td align = "center" центрирует содержимое внутри этого td, полезно для центрированного выровненного текста, но у вас будут проблемы с некоторыми почтовыми клиентами, центрирующими контент в таблицах подуровня, поэтому использование td align в качестве метода верхнего уровня для центрирования вашего «Контейнерная» таблица на странице не способ сделать это. Вместо этого используйте выравнивание таблицы.

По-прежнему используйте вашу таблицу обертки 100%, просто в качестве обертки для тела, поскольку некоторые почтовые клиенты не отображают цвета фона тела, но отображают ее в таблице 100%, поэтому добавьте свой цвет тела для обоих тел. и таблица 100%.

Я мог бы продолжать и рассказывать целую вечность обо всех причудах разработчика электронной почты html. Все, что я могу сказать, это тестовый тест и тест снова. Litmus.com - отличный инструмент для тестирования электронных писем.

Чем больше вы делаете, тем больше узнаете о том, что работает в каких почтовых клиентах.

Надеюсь, это поможет.

Answer 4

CSS в электронных письмах - это боль. К сожалению, вам, вероятно, понадобятся таблицы, потому что CSS не очень поддерживается во всех почтовых клиентах.

Тем не менее, используйте HTML переходный DOCTYPE, а не XHTML, и используйте <center>.

Answer 5

Вот ваше пуленепробиваемое решение:

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

Answer 6

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

Позволяет перечислить все электронные письма, на которые вы хотите отправить тестовое письмо. Вы можете вставить свой код прямо в окно, редактировать, отправлять и повторно отправлять. Это помогло мне тонну.

Answer 7

В некоторых случаях margin = "0 auto" не срезает горчицу при выравнивании по центру электронной почты html в Outlook 2007, 2010, 2013.

Попробуйте следующее:

Оберните ваш контент в другую таблицу с помощью style = "table-layout: fixed;" и выровняйте = «центр».

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