HTML 이메일 콘텐츠를 브라우저 창 (또는 이메일 클라이언트 미리보기 창)의 중앙에 배치하는 가장 좋은 방법은 무엇입니까?

Question 1

일반적으로 margin:0 auto표준 브라우저 기반 콘텐츠에 대해 960 컨테이너와 함께 CSS 규칙을 사용 하지만 HTML 이메일 작성이 처음이고 표준 CSS없이 브라우저 창 중앙에 배치하려는 다음 디자인이 있습니다. .

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

이메일 테이블 디자인을 외부 테이블 세트에 포장 하고 tbody 또는 이와 유사한 것을 width:100%사용하여 인라인 스타일을 사용하여 수행 할 수도 있다는 것을 어딘가에서 본 것을 기억하는 것 같습니다 text-align:center.

이에 대한 모범 사례가 있습니까?

Question 2

테이블을 중앙에 맞 춥니 다.

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

테이블 인 경우 "콘텐츠"가있는 경우 원하는 너비로 설정하면 콘텐츠가 중앙에 배치됩니다.

Question 3

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>

Question 4

table align = "center"... 이것은 페이지의 테이블 중앙을 정렬합니다.

td align = "center"를 사용하면 해당 td 내부의 콘텐츠가 중앙에 정렬되어 중앙에 정렬 된 텍스트에 유용하지만 일부 이메일 클라이언트에서 하위 수준 테이블의 콘텐츠를 중앙에 배치하는 데 문제가 있으므로 td align을 "컨테이너"를 중앙에 배치하는 최상위 방법으로 사용합니다. 페이지의 테이블은 그렇게하는 방법이 아닙니다. 대신 표 정렬을 사용하십시오.

일부 이메일 클라이언트는 본문 배경색을 표시하지 않지만 100 % 표로 표시하므로 100 % 래퍼 테이블도 순수하게 본문에 대한 래퍼로 사용합니다. 따라서 본문과 100 모두에 바디 색상을 추가합니다. % 테이블.

html 이메일 개발자의 모든 단점에 대해 몇 년 동안 계속할 수 있습니다. 내가 말할 수있는 것은 테스트 테스트와 다시 테스트입니다. Litmus.com은 이메일 테스트를위한 훌륭한 도구입니다.

더 많이할수록 어떤 이메일 클라이언트에서 작동하는지 더 많이 알게됩니다.

도움이 되었기를 바랍니다.

Question 5

방탄 솔루션은 다음과 같습니다.

<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로 대체하기 때문에 이메일을 중앙에 배치하지 않음)

Question 6

이메일의 CSS는 고통입니다. 안타깝게도 CSS가 모든 이메일 클라이언트에서 크게 지원되는 것은 아니기 때문에 테이블이 필요할 것입니다.

즉, XHTML이 아닌 HTML Transitional DOCTYPE을 사용하고 <center>.

Question 7

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/

테스트 이메일을 보내려는 모든 이메일을 나열 할 수 있습니다. 코드를 창에 바로 붙여넣고, 편집하고, 보내고, 다시 보낼 수 있습니다. 그것은 나에게 많은 도움이되었습니다.

Question 8

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>