일반적으로 margin:0 auto표준 브라우저 기반 콘텐츠에 대해 960 컨테이너와 함께 CSS 규칙을 사용 하지만 HTML 이메일 작성이 처음이고 표준 CSS없이 브라우저 창 중앙에 배치하려는 다음 디자인이 있습니다. .
http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html
이메일 테이블 디자인을 외부 테이블 세트에 포장 하고 tbody 또는 이와 유사한 것을 width:100%사용하여 인라인 스타일을 사용하여 수행 할 수도 있다는 것을 어딘가에서 본 것을 기억하는 것 같습니다 text-align:center.
이에 대한 모범 사례가 있습니까?
답변
테이블을 중앙에 맞 춥니 다.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Your Content
</td>
</tr>
</table>
테이블 인 경우 “콘텐츠”가있는 경우 원하는 너비로 설정하면 콘텐츠가 중앙에 배치됩니다.
답변
Google 직원과 완전성을 위해 :
다음은 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>
답변
table align = “center”… 이것은 페이지의 테이블 중앙을 정렬합니다.
td align = “center”를 사용하면 해당 td 내부의 콘텐츠가 중앙에 정렬되어 중앙에 정렬 된 텍스트에 유용하지만 일부 이메일 클라이언트에서 하위 수준 테이블의 콘텐츠를 중앙에 배치하는 데 문제가 있으므로 td align을 “컨테이너”를 중앙에 배치하는 최상위 방법으로 사용합니다. 페이지의 테이블은 그렇게하는 방법이 아닙니다. 대신 표 정렬을 사용하십시오.
일부 이메일 클라이언트는 본문 배경색을 표시하지 않지만 100 % 표로 표시하므로 100 % 래퍼 테이블도 순수하게 본문에 대한 래퍼로 사용합니다. 따라서 본문과 100 모두에 바디 색상을 추가합니다. % 테이블.
html 이메일 개발자의 모든 단점에 대해 몇 년 동안 계속할 수 있습니다. 내가 말할 수있는 것은 테스트 테스트와 다시 테스트입니다. Litmus.com은 이메일 테스트를위한 훌륭한 도구입니다.
더 많이할수록 어떤 이메일 클라이언트에서 작동하는지 더 많이 알게됩니다.
도움이 되었기를 바랍니다.
답변
방탄 솔루션은 다음과 같습니다.
<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>
시도해보십시오. 약간 지저분 해 보이지만 Yahoo 메일을위한 새로운 Firefox 업데이트에서도 작동합니다. (메인 테이블을 div로 대체하기 때문에 이메일을 중앙에 배치하지 않음)
답변
이메일의 CSS는 고통입니다. 안타깝게도 CSS가 모든 이메일 클라이언트에서 크게 지원되는 것은 아니기 때문에 테이블이 필요할 것입니다.
즉, XHTML이 아닌 HTML Transitional DOCTYPE을 사용하고 <center>.
답변
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/
테스트 이메일을 보내려는 모든 이메일을 나열 할 수 있습니다. 코드를 창에 바로 붙여넣고, 편집하고, 보내고, 다시 보낼 수 있습니다. 그것은 나에게 많은 도움이되었습니다.
답변
Outlook 2007, 2010, 2013에서 HTML 이메일을 가운데 정렬 할 때 margin = “0 auto”가 겨자를 자르지 않는 경우가 있습니다.
다음을 시도하십시오.
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>
