2012-10-25 4 views
11

아주 간단한 html 이메일을 만들었습니다. http://staging.xhtml-lab.com/mailtest/센터 정렬 이메일 outlook.com

중앙 정렬을 유지해야한다, 왼쪽 정렬됩니다 핫메일 이메일 hotmail.com/outlook.com

를 제외하고, 모든 전자 메일 클라이언트에서 잘 작동합니다.

emailology.org에서 제안한대로 다음 코드를 추가했지만 아무런 효과가 없습니다.

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

전자 메일 센터를 정렬하려면 어떻게해야합니까?

+0

문제는 '

'일 수 있습니다. 나는 그것이 모든 이메일 클라이언트에 의해 지원된다면 확신하고, MS 아웃룩/핫메일은 그들이 지원하는 것에 대해 특히 까다로운 것으로 알려져있다. 이 페이지는 도움이 될 수 있습니다 : http://www.campaignmonitor.com/css/ – kburns

답변

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로 설계 부분에 대한 배경 색 남아있는 동안 그들이, 흰색에 입력 할 수 있습니다)에 이메일을 전달할 때 흰색 배경에 지어진. 또한 Outlook은 전달 될 때 테이블 사이에 간격을두기 때문에 기본 패널은 bgcolor로 설정됩니다.

희망이 있습니다.

+1

실제로 저에게 많은 도움을 주셨습니다! Outlook 365와 Outlook 2010 사이에 이메일을 보낼 수 없었습니다 ... 동일한 태그를 사용했지만 분명히 귀하의 주문은 어떻게 든 다르고 정확하고 모든 고객에게 이메일을 집중시킬 수 있습니다. 감사! – mike

+0

나쁜 소식은 싫어하지만 모든 이메일 클라이언트에서는 100 % 작동하지 않습니다. – Goose

+0

@Goose. 모든 주요 고객에게 해당됩니다. 리트머스 (Litmus)와 같이 덜 알려진 클라이언트 서비스가 많기 때문에 "주요 (major)"답변을 추가했습니다. – John

27

이 당신을 중심으로 전자 메일을 제공한다 :

<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 태그 다음에 중점을두고 있으므로 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> 

전망은 max-width을 지원하지 않기 때문에 크기는 Outlook 용 640 픽셀로 고정됩니다. 다른 모든 클라이언트의 경우 전자 메일의 너비는보기 창의 너비와 같지만 최대 800px입니다.

가능한 한 많은 클라이언트에서 작동하는 솔루션을 찾을 수 있도록 이러한 솔루션이 작동하지 않는 클라이언트를 찾으면 알려 주시기 바랍니다.

+1

매우 유용한 @magnarmyrtveit 감사합니다! –

+1

'

' 태그 자체가 내 Hotmail/Outlook 문제를 해결했습니다. –