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

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

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

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

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

Ответ 1

Совместите таблицу с центром.

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

Если у вас есть "ваш контент", если это таблица, установите ее на нужную ширину, и у вас будет центрированный контент.

Ответ 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>

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

Ответ 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)

Ответ 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/

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

Ответ 7

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

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

Оберните свой контент в другую таблицу со стилем = "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>