2017-09-05 5 views
1

私はsend gridを使ってニュースレター用の電子メールテンプレートを作成していますが、設計しています。下の画像False Imageは、メール本文にニュースレターのコンテンツをどのように配置することができますか?sendgridに電子メール本文の内容を集中させるにはどうすればいいですか?

編集1:問題は、Outlookだけ

<style type="text/css"> 
    body { 
     min-width: 100%; 
     margin: 0; 
     padding: 0; 
     -webkit-font-smoothing: anyialiased; 
     font-family: Trebuchet MS; 
    } 
    span { 
     color:#808080; 
     font-size:12px; 
    } 
    img { 
     display: inline-block; 
     max-width: 100%; 
     max-height: 100%; 
    } 
    table { 
     border-collapse: collapse; 
     } 

    </style> 

<!--Main Container--> 
<table border="" cellpadding="0" cellspacing="0" width="100%" class="wrapper"> 
<tbody> 
    <tr> 
    <td valign="top" width="600"> 
     <!--First Table--> 
       <table border="0" cellpadding="0" cellspacing="0" class="devicewidth"> 
        <tbody> 
         <tr> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
          <td valign="top"> 
           <!--Content--> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
    </td> 
    </tr> 
</tbody> 
</table> 
<!--End of Main Container--> 

False image

+0

あなたは電子メールのトランザクションのテンプレートを使用していますか? – Niladri

+0

はい@niladri、私はそれを使用しています – Beginner

答えて

0

それはすべてのニュースレター/テンプレートシステム(私はMailchimp自分自身を使用)に使用可能である必要がありかなり確実であると思われます。コードは基本的に「垂直中心」が欠けています。

以下のスニペットで説明します。

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="background-color:red;height:200px;"> 
 
\t <tr> 
 
    <!-- THIS <td> element needs align center!! --> 
 
    <td align="center" valign="top" > 
 

 
     <table border="0" cellpadding="0" cellspacing="0" width="200" class="templateContainer" style="background-color:white;height:100%;"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td> 
 
      content goes here 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
</table>

関連する問題