图片在gmail,outlook和yahoo邮件上没有对齐

时间:2017-03-31 17:24:28

标签: html-email email-client email-templates

我是电子邮件模板设计的新手,我想知道为什么我的电子邮件模板会发生这种情况。第一个屏幕截图是我期望的,其他的是分别在gmail,yahoo和outlook中呈现的内容。我担心的是为什么徽标没有像预期的那样与右边对齐。我还附上了显示徽标的相应代码。

Expected enter image description here enter image description here enter image description here

<tr>
	<td align="center" valign="top">
	<!-- CENTERING TABLE // -->
	<!--
	The centering table keeps the content
	tables centered in the emailBody table,
	in case its width is set to 100%.
	-->
	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1">
	<tr>
	<td align="center" valign="top">
	<!-- FLEXIBLE CONTAINER // -->
	<!--
	The flexible container has a set width
	that gets overridden by the media query.
	Most content tables within can then be
	given 100% widths.
	-->
	<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
	<tr>
	<td align="center" valign="top" width="600" class="flexibleContainerCell">

	<!-- CONTENT TABLE // -->
	<!--
	The content table is the first element
	that's entirely separate from the structural
	framework of the email.
	-->
	<table border="0" cellpadding="30" cellspacing="0" width="100%">
	<tr>
	<td align="center" valign="top" class="textContent">
	<img align="right" alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /><br /><br />
	</td>
	</tr>
	</table>
	<!-- // CONTENT TABLE -->
	</td>
	</tr>
	</table>
	<!-- // FLEXIBLE CONTAINER -->
	</td>
	</tr>
	</table>
	<!-- // CENTERING TABLE -->
	</td>
</tr>

1 个答案:

答案 0 :(得分:0)

在td上有很多对齐中心需要对齐,因为徽标位于应该正确对齐的表格中。

我添加了一张额外的桌子,并使其与徽标大小相同,并将其对齐。

&#13;
&#13;
	<tr>
	<td align="right" valign="top">
	<!-- CENTERING TABLE // -->
	<!--
	The centering table keeps the content
	tables centered in the emailBody table,
	in case its width is set to 100%.
	-->
	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1">
	<tr>
	<td align="right" valign="top">
	<!-- FLEXIBLE CONTAINER // -->
	<!--
	The flexible container has a set width
	that gets overridden by the media query.
	Most content tables within can then be
	given 100% widths.
	-->
	<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
	<tr>
	<td align="right" valign="top" width="600" class="flexibleContainerCell">

	<!-- CONTENT TABLE // -->
	<!--
	The content table is the first element
	that's entirely separate from the structural
	framework of the email.
	-->
	<table border="0" cellpadding="30" cellspacing="0" width="100%">
	<tr>
	<td align="right" valign="top" class="textContent">

	<table width="152" border="0" align="right" cellpadding="0" cellspacing="0" style="width:100%; max-width: 152px;">
	<tbody>
	<tr>
	<td align="right"><img alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /></td>
	</tr>
	</tbody>
	</table>
	</td>
	</tr>
	</table>
	<!-- // CONTENT TABLE -->
	</td>
	</tr>
	</table>
	<!-- // FLEXIBLE CONTAINER -->
	</td>
	</tr>
	</table>
	<!-- // CENTERING TABLE -->
	</td>
	</tr>
&#13;
&#13;
&#13;

如果能解决这个问题,请告诉我。如果这没有解决问题,那么我们将需要更多代码来查看是否存在任何冲突的类或ID导致模板比设计更进一步。

这是混合或响应式电子邮件的一部分吗?

干杯