2012-10-25 23 views
11

Utworzyłem bardzo prosty e-mail HTML. http://staging.xhtml-lab.com/mailtest/wyśrodkuj wiadomość e-mail w outlook.com

To działa dobrze w wszystkich klientów poczty, z wyjątkiem hotmail.com/outlook.com

w hotmail email jest wyrównane do lewej, powinien on pozostać centrum wyrównane.

Dodałem następujący kod, zgodnie z sugestią emailology.org, ale nie ma to żadnego wpływu.

<style type=“text/css”> 
/**This is to overwrite Hotmail’s 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> 

Jakieś sugestie, co jeszcze mogę zrobić, aby wyrównać centrum wiadomości e-mail?

+0

Problem może być '

'. Jestem pewien, że jest to obsługiwane przez wszystkich klientów poczty e-mail, a wiadomo, że MS Outlook/Hotmail jest szczególnie wrażliwy na to, co obsługuje. Ta strona może pomóc: http://www.campaignmonitor.com/css/ – kburns

Odpowiedz

2

Oto jeden, który zbudowałem, który używam jako punkt wyjścia dla wszystkich moich e-maili. Działa w 100% na wszystkich głównych klientów e-mail:

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

Posiada wbudowany w białym tle na kiedy ktoś przesyła wiadomość e-mail na (można je wpisać na białym, natomiast tło dla html zaprojektowany część pozostaje w kolorze). Również główny panel jest ustawiony za pomocą bgcolor, ponieważ Outlook umieszcza przerwy między tabelami, gdy jest przekazywany.

Nadzieję, że pomaga.

+1

, która bardzo mi pomogła, dziękuję! Nie można pobrać wiadomości e-mail do centrum między Office 365 i Outlook 2010 ... miał te same tagi, ale oczywiście kolejność jest w jakiś inny, poprawny i działa na środku e-mail wszystkich klientów. Dzięki! – mike

+0

Nienawidzę nosić złe wieści, ale nic nie działa w 100% na wszystkich klientach poczty e-mail. – Goose

+0

@Goose. Dotyczy to wszystkich głównych klientów. Dodałem "poważny" do odpowiedzi, ponieważ istnieje wiele mniej znanych usług, takich jak Lakmus, na które nie testujemy. – John

27

To powinno dać skoncentrowany e-mail:

<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 to, co jest wymagane przez program Outlook i outlook.com. Inni klienci używają atrybutu margin. W przypadku niektórych klientów tekst jest wyśrodkowany po tekście, a więc wymagany jest atrybut text-align.

Jeśli chcesz szerokość być zmienna w zależności od rozmiaru ekranu, należy użyć następującego kodu:

<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 nie obsługuje max-width, a więc wielkość jest ustalona na 640 dla programu Outlook. W przypadku wszystkich innych klientów szerokość wiadomości e-mail będzie taka sama, jak szerokość okna podglądu, ale maksymalna to 800 pikseli.

Proszę dać mi znać, jeśli znajdziesz klienta, gdzie te rozwiązania nie działają, abyśmy mogli znaleźć rozwiązanie, które działa z jak największą liczbą klientów.

+1

bardzo przydatne @magnarmyrtveit dzięki! –

+1

Sam tag "

" rozwiązał mój problem Hotmail/Outlook. –