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

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

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

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

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

7 69
css-tables html-email

7 ответов:

выровнять таблицу по центру.

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

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

167

для гуглеров и полноты изложения:

вот ссылка, которую я всегда использую, когда мне нужно пройти через боль от реализации html-шаблонов электронной почты или подписей: http://www.campaignmonitor.com/css/

i'TS список поддержки 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>
25

таблица выровняйте="центр" ... это выравнивает центр таблицы страницы.

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

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

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

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

надеюсь, что это помогает.

8

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

что сказать, используйте HTML-переходный DOCTYPE, то не XHTML, а также использовать <center>.

6

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

<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 mail. (не центрирует электронную почту, потому что заменяет основную таблицу div)

4

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

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

4

в некоторых случаях 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>
1