gmail、outlook 和 yahoo 邮件上的图像未与右侧对齐

Question

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

<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>

Answer 1

td 上有很多对齐中心，需要右对齐，因为徽标位于应该右对齐的表格中。

我添加了一个额外的表格，使其与徽标的大小相同并正确对齐。

	<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>

如果这能解决问题，请告诉我。如果这不能解决问题，那么我们将需要更多代码来查看是否有任何冲突的类或 ID 导致模板比设计更糟糕。

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

干杯