центр выравнивания электронной почты в outlook.com

Я создал очень простое html-письмо. http://staging.xhtml-lab.com/mailtest/

Он отлично работает во всех почтовых клиентах, за исключением hotmail.com/outlook.com.

в письме hotmail выравнивается влево, он должен оставаться центрированным.

Я добавил следующий код, как было предложено по электронной почте, но он не имеет никакого эффекта.

<style type="text/css">
/**This is to overwrite Hotmails Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>

Любые предложения о том, что еще я могу сделать, чтобы выравнивать центр электронной почты?

Ответ 1

Это должно дать вам центральное электронное письмо:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
          <tr>
            <td>
              Your content here
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

center -tag - это то, что требуется Outlook и outlook.com. Другие клиенты используют атрибут margin. В некоторых клиентах текст центрируется по center -tag, и поэтому требуется атрибут text-align.

Если вы хотите, чтобы ширина была переменной в зависимости от размера экрана, используйте следующий код:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <!--[if mso]>
        <table style="width: 640px;"><tr><td>
        <![endif]-->
        <div style="max-width: 800px; margin: 0 auto;">
          <table style="background: blue; text-align: left;">
            <tr>
              <td>
                Your content here
              </td>
            </tr>
          </table>
        </div>
      </center>
      <!--[if mso]>
      </td></tr></table>
      <![endif]--> 
    </td>
  </tr>
</table>

Outlook не поддерживает max-width, и поэтому размер фиксируется на 640px для Outlook. Для всех других клиентов ширина электронной почты будет такой же, как ширина окна просмотра, но максимум 800 пикселей.

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

Ответ 2

Вот один, который я создал, который я использую в качестве отправной точки для всех моих писем. Он работает на всех основных почтовых клиентах на 100%:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->

content...

<!-- /CENTER BG COLOR -->
</td></tr></table>

<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>

Он имеет встроенный белый фон, когда кто-то пересылает электронную почту (они могут печатать на белом фоне, а фон для детали, разработанной html, остается цветной). Также основная панель устанавливается с помощью bgcolor, потому что Outlook ставит промежутки между таблицами при ее пересылке.

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

Ответ 3

Вы также можете align="center" свой шаблон электронной почты, добавив align="center" в тег основной таблицы:

    <body>
      <table align="center">
        <tr>
          <td style="width:600px;">
            <!-- content -->
          </td>
        </tr>
      </table>
   </body>