HTML电子邮件不以outlook为中心

时间：2017-06-14 16:20:50

标签： html email outlook

所以我使用表编写了一个HTML电子邮件但是，电子邮件拒绝以outlook为中心，我认为这与我正在使用的软件正在删除标题信息这一事实有关。我如何以背景颜色居中？

＆＃13;
＆＃13; 
<div class="container" style="width: 100%; background-color: #f8f8f8; vertical-align: center; "
<table class="fullSize" style="width: 100%; border-collapse: collapse; background-color: #f8f8f8;" border="0" cellspacing="0" cellpadding="0" bgcolor="#f8f8f8">
<tbody>
<tr>
<td style="border-collapse: collapse;" align="center" valign="top">
<table class="outSide" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="5" align="center">
<tbody>
<tr>
<td style="height: 30px;">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="border-collapse: collapse;" align="center">
<table class="titleTable" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="10" bgcolor="#8AE872">
<tbody>
<tr bgcolor="#b8d9ec">
<td style="padding: 0px 0px 0px; border-collapse: collapse;" align="center">
<div><img class="fullImage" style="text-decoration: none; width: 600px; height: 193px;" src="xxx" alt="" width="600" height="193" /></div>
</td>
</tr>
</tbody>
</table>
<table class="introBlock" style="margin: 0px auto; padding: 0px; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tbody>
<tr>
<td class="introText" style="padding: 10px 10px 10px 10px; border-collapse: collapse; color: #313131; border-top: white solid 15px;" align="left" valign="top">
<table class="leftInnerContent" style="margin: 0px auto; padding: 0px; width: 570px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tbody>
<tr>
<td class="leftInnerBody" style="color: #080935; padding: 15px 20px 15px 20px; margin: 0px; border-bottom: 10px solid white; background: #ffffff;" align="left" valign="top">
<table class="leftInnerStack" style="margin: 5px; padding: 0px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; color: #080935;" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tbody>
<tr>
<td class="leftInnerStackText" style="width: 520px; background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding-bottom: 10px;">
<p style="font-size: 16px; line-height: 1.5em;">Dear Jane Doe,</p>
<p style="font-size: 16px; line-height: 1.5em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna turpis, tristique ac ligula id, dignissim venenatis nulla. Suspendisse tincidunt orci eget diam dignissim, a varius nulla aliquam. Vestibulum sed sagittis mi.</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<td style="padding: 7px; background-color: #8b69d3; font-size: 16px; text-decoration: none; color: white;"><a style="padding: 5px 15px; text-decoration: none; color: #ffffff!important;" href="@@SURVEY_URL_PLACEHOLDER__DO_NOT_ERASE" target="_blank"><span style="color: #fff!important; font-weight: lighter; text-transform: uppercase; font-size: 20px;">ANSWER SURVEY &nbsp; ⟩ ⟩ ⟩</span> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="leftInnerBody3" style="color: #080935; padding: 15px 20px 15px 20px; border-bottom: 10px solid white; background: #f8f8f8;" align="left" valign="top"><img style="max-width: 530px; height: auto;" src="xxx" alt="" width="530" height="247" />
<!-- <table>
										<tbody>
											<tr>
												<td pardot-region="" style="padding: 7px; background-color: #080935; font-size: 12px; text-decoration: none; color: #ffffff!important; "><a href="#" style="padding: 5px 15px; text-decoration:none;color: #ffffff!important;" target="_blank"><font color="#ffffff" style="color: #ffffff!important; font-weight: bold;">Get stared &nbsp;</font> </a></td>
											</tr>
										</tbody>
									</table> --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="border-collapse: collapse;">
<table class="outSide" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="12" align="center" bgcolor="#f8f8f8">
<tbody>
<tr>
<td style="border-collapse: collapse; background-color: #f8f8f8;" align="center" valign="top" width="600px">
</td>
</tr>
<!-- <tr>

            <td align="center" width="600px" style="border-collapse: collapse; background-color: #f8f8f8;" valign="top">
               <p><a style="font-size: 16px; color:#484D51; text-decoration: underline;" href="www.interoute.com">www.interoute.com</a></p>
            </td>

          </tr> -->
<tr>
<td style="border-collapse: collapse; background-color: #f8f8f8;" align="center" valign="top" width="600px">
<p style="font-size: 12px; color: #81888d; text-align: center; line-height: 1.5em;">&copy;  <a href="@@OPT_OUT_PLACEHOLDER__DO_NOT_ERASE">Unsubscribe</a> @@FooterCompany @@FooterCountry @@FooterCity @@FooterPostCode @@FooterAddress1</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我的建议是重新开始并专注于代码的格式化。它很糟糕，在许多电子邮件客户端都无法正确阅读。

例如，您有一个未关闭的div：

<div class="container" style="width: 100%; background-color: #f8f8f8; vertical-align: center; "

您错过了</div>

开始表关闭，但是在关闭表之后没有</td></tr>，没有开放表标题或表格行或单元格。

此外，您没有在样本中包含样式表，但是您在表结构中引用了类。所以我们不知道你的风格是否还有其他问题。

另外，您的电子邮件确实以Outlook为中心。至少没有样式表。它并不以Gmail为中心。您当前代码的状态是草率的，可能导致不必要的糟糕结果，这就是为什么我鼓励您在继续之前重新格式化。

祝你好运。

答案 1 :(得分：0)

您可以通过两个重要步骤将电子邮件Camera.PictureCallback mPicture = new Camera.PictureCallback() { @Override public void onPictureTaken(byte[] data, Camera camera) { File pictureFile = new File(photoPath.toString()); byte[] pictureBytes; Bitmap thePicture; Matrix m; ByteArrayOutputStream bos; BitmapFactory.Options opt; if (pictureFile == null) { return; } try { opt = new BitmapFactory.Options(); opt.inTempStorage = new byte[16 * 1024]; Camera.Parameters parameters = camera.getParameters(); Camera.Size size = parameters.getPictureSize(); int height11 = size.height; int width11 = size.width; float mb = (width11 * height11) / 1024000; if (mb > 4f) opt.inSampleSize = 2; thePicture = BitmapFactory.decodeByteArray(data, 0, data.length, opt); if (cameraFront) { m = new Matrix(); m.postRotate(270); Utils.freeMemory(); thePicture = Bitmap.createBitmap(thePicture, 0, 0, thePicture.getWidth(), thePicture.getHeight(), m, true); bos = new ByteArrayOutputStream(); thePicture.compress(Bitmap.CompressFormat.JPEG, 100, bos); pictureBytes = bos.toByteArray(); } else { m = new Matrix(); m.postRotate(90); Utils.freeMemory(); thePicture = Bitmap.createBitmap(thePicture, 0, 0, thePicture.getWidth(), thePicture.getHeight(), m, true); bos = new ByteArrayOutputStream(); thePicture.compress(Bitmap.CompressFormat.JPEG, 100, bos); pictureBytes = bos.toByteArray(); } FileOutputStream fos = new FileOutputStream(pictureFile); fos.write(pictureBytes); fos.close(); if (thePicture != null) { if (!thePicture.isRecycled()) { thePicture.recycle(); } thePicture = null; } bos.close(); m = null; } catch (FileNotFoundException e) { Log.error(getClass().getName(), e.toString()); } catch (IOException e) { Log.error(getClass().getName(), e.toString()); } catch (OutOfMemoryError e) { Log.error(getClass().getName(), e.toString()); } } }; 居中。

  • 添加包装器body元素
  • 使用固定像素大小的包装<center>（百分比大小可以扩展为全宽）。

这是我们博客系列中Outlook中基本居中电子邮件HTML模板的specific part，可能会有所帮助。如果您需要更深入的基础，本系列中还有关于背景图像和布局方法主题的帖子。

相关问题
最新问题