HTML电子邮件表格与背景图像对齐
我已经创建了一个html电子邮件，需要图像“clipboard3.png”显示在图像的背景中，所有表格内容都应该放在图像的顶部。现在，在没有图像的情况下，表格内容将对齐到中心，但当我将图像添加到主体中时，表格及其内容将全部推到左侧 我如何解决这个问题？我试着在所有的桌子上“对齐：居中”等等，但似乎没有任何效果HTML电子邮件表格与背景图像对齐,html,email,Html,Email,我已经创建了一个html电子邮件，需要图像“clipboard3.png”显示在图像的背景中，所有表格内容都应该放在图像的顶部。现在，在没有图像的情况下，表格内容将对齐到中心，但当我将图像添加到主体中时，表格及其内容将全部推到左侧 我如何解决这个问题？我试着在所有的桌子上“对齐：居中”等等，但似乎没有任何效果 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Classic</title>
<style type="text/css">
a:hover { text-decoration: underline !important; }
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" style="background:url(clipboard3.png); background-repeat: no-repeat; height:100px; width: 684px;">
<!--100% body table-->
<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#ffffff" style="margin: 0px auto";>
<tr>
<td align="center">
<!--top links-->
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center";>
<tr>
<td valign="middle" align="center" height="45">
<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
Is this email not displaying correctly? <webversion style="color: #c88b04; text-decoration: none;" href="#">Try the web version.</webversion></p></td>
</tr>
</table>
<!--header-->
<table style="background-color: #fffdf9;" width="684" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="173">
<!--ribbon-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="120" width="45"></td>
<td background="#c88b04" valign="top" bgcolor="" height="120" width="80"><img src="dateRibbon2.png" width="81" height="121">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" align="center" height="35">
<p style="font-size: 14px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;">ISSUE</p>
</td>
</tr>
<tr>
<td valign="top" align="center">
<p style="font-size: 36px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;">31</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--ribbon-->
</td>
<td valign="middle" width="493"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="60">
</td>
</tr>
<tr>
<td>
<h1 style="color: #333; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, 'Times New Roman', Times, serif">FirstPoint USA <em>Newsletter</em></h1>
</td>
<td><img src="FPFinger.png" width="102" height="186"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
</table>
<!--date-->
<table border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table><!--/date-->
</td>
<td width="18"></td>
</tr>
</table>
</td>
</tr>
</table><!--/header-->
<!--email container-->
<table bgcolor="#fffdf9" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
<tr>
<td >
<!--email content-->
<table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
<tr>
<td>
<!--section 1-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center">
<img src="images/img1.jpg" alt="image dsc" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="622" />
<!--line break-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" height="50"><img src="lineBreak.png" width="600" height="1"></td>
</tr>
</table><!--/line break-->
<h1 style="font-size: 36px; font-weight: normal; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; margin-top: 0px; margin-bottom: 20px;">Lorem ipsum <em>dolor sit amet</em></h1>
<p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a> a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</p>
</td>
</tr>
</table><!--/section 1-->
<!--line break-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td height="72"><img src="lineBreak.png" width="600" height="1"></td>
</tr>
</table><!--/line break-->
<!--section 2-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
<tr>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img2.jpg" height="108" alt="img2" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="color: #333333; font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img3.jpg" height="108" alt="img3" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img4.jpg" height="108" alt="img4" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img5.jpg" height="108" alt="img5" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--/section 2-->
<!--section 3-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<!--line break--><!--/line break--><!--line break--><!--/line break-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
</tr>
</table>
<!--line break--><!--/line break--><!--line break--><!--/line break-->
</td>
</tr>
</table><!--/section 3-->
</td>
</tr>
</table><!--/email content-->
</td>
</tr>
</table><!--/email container-->
<!--footer-->
<table width="600" border="0" align="center" cellpadding="30" cellspacing="0">
<tr>
<td valign="top">
<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
You’re receiving this newsletter because you’ve subscribed to our newsletter<br>
Not interested anymore? <unsubscribe style="color: #bc1f31; text-decoration: none;" href="#">Unsubscribe instantly.</unsubscribe></p>
</td>
<td valign="top"><p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">145 North Street, Glasgow, G*****</p></td>
</tr>
<tr>
<td height="30"></td>
<td height="30"></td>
</tr>
</table><!--/footer-->
</td>
</tr>
</table><!--/100% body table-->
</body>
</html>
电子邮件模板-经典
a:悬停{文本装饰：下划线！重要；}
此电子邮件是否显示不正确？试试网络版
31
第一点美国通讯
Lorem ipsum dolor sit amet
。nec mauris的一只同侧臀大鼠。在弓形矢状面上，坐着一位天使，暂时性丘脑静脉曲张。莫蒂斯·康莫多·乌尔纳（Maurtis commodo urna）在酒后驾车。虎鲸前庭
Lorem ipsum dolor sit amet
。nec mauris中的一只大鼠。Fusce-sit
Lorem ipsum dolor sit amet
。nec mauris中的一只大鼠。Fusce-sit
Lorem ipsum dolor sit amet
。nec mauris中的一只大鼠。Fusce-sit
Lorem ipsum dolor sit amet
。nec mauris中的一只大鼠。Fusce-sit
您收到此新闻稿是因为您订阅了我们的新闻稿
不再感兴趣了？立即取消订阅
乔治亚州格拉斯哥北街145号*****
rowspancolspandivspan