我正在设置电子邮件新闻稿模板，但是顶部的图像以及底部的视频链接未正确对齐。
当我预览模板或代码时，文字看起来很好，但是一旦发送电子邮件，图像就会从右侧溢出。救命！
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_white a {
color: #ffffff !important;
text-decoration: none !important;
}
.em_black a {
color: #000000;
text-decoration: none;
}
.em_green a {
color: #737f48;
text-decoration: none;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Our Preschool Program</title>
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<!-- Emailer Starts Here-->
<td align="center" valign="top"><table style="table-layout:fixed;" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" style="background-repeat:no-repeat;" width="313" height="451" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:313px;height:451px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="106"> </td>
<td valign="top" align="center" width="105"><a href="http://[{CenterWebsite}]" target="_blank" style="text-decoration:none; color:#ffffff;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_header.png" width="105" height="105" alt="PRIMROSE SCHOOL" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" border="0"/></a></td>
<td width="102"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="61"> </td>
</tr>
<tr>
<td class="em_white" valign="top" align="center" style="font-family:UnitOT, sans-serif; font-size:43px; line-height:50px; color:#ffffff;">Our <br />Preschool<br/>Program</td>
</tr>
<tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
<td valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/banner.jpg" width="487" height="451" alt="Our preschool Program" style="display:block;" border="0"/></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="28" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" bgcolor="#f2f2f2"> </td>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="18" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18"> </td>
<td width="1" bgcolor="#737f48"></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td valign="top" align="center"><table width="645" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_black" valign="top" align="left" style="font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#000000;"><TemplateField Name="Message" Width="645" MinHeight="30" MaxHeight="1000" Height="30">Thank you for inquiring about the [{CenterName}] for your preschooler! We hope we have the opportunity to partner with you to provide an unparalleled early learning experience for your child and family.<br /><br />
<b>About <i>Primrose®</i> and <i>Balanced Learning®</b></i><br />
At Primrose, we believe who children become is as important as what they know. That's why our exclusive <i>Balanced Learning </i> approach emphasizes character development and life skills in addition to nurturing children's intellectual, creative and physical development.<br /><br />
<i>Balanced Learning</i> is created from the best early education wisdom to ensure we offer the highest quality early education and care possible. Meaningful daily classroom experiences weave learning and fun together for children, and a balance of purposeful play and nurturing guidance from teachers gives every child the opportunity to reach his full learning potential.<br /><br />
<b>About our Preschool Classroom</b><br />
Our Preschool classroom is part of our Venture Program for children ages 3 to 5, which focuses on building children's confidence and independence so they feel comfortable venturing out, exploring on their own and asking questions. We invite you to watch the video below for a glimpse inside our Preschool classroom and to learn more about the unique experiences designed to nurture curiosity, creativity, confidence and compassion.<br /><br />
We would love to speak with you more about what you are looking for in a child care provider. Please let us know a time that is convenient for you to visit our school and meet our School Leadership Team and teachers.<br /><br />
Thank you again for your interest in the [{CenterName}]. We look forward to meeting you and your child soon!<br /><br />
Sincerely,
</TemplateField></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif;font-size:12px;height:19px;color:#231f20;text-align:left;">[{CenterName}]<br />
[{CenterAddress1}] [{CenterAddress2}] | [{CenterCity}], [{CenterState}] [{CenterZip}]<br />
[{CenterPhone}] | <a href="http://[{CenterWebsite}]" target="_blank" style="color:#231f20;text-decoration:none;">[{CenterWebsite}]</a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" bgcolor="#737f48"></td>
<td width="18"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" height="182" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center"><table width="380" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
<tr>
<td height="10" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Learn more about our </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Preschool program.</td>
</tr>
<tr>
</tr>
<tr>
<td align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="right" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="198"> </td>
<td align="right" valign="top" width="31"><a href="https://www.facebook.com/PrimroseSchools" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/fb.jpg" width="31" height="31" alt="Fb" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></a></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><a href="http://twitter.com/primroseschools" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/twitt.jpg" width="30" height="31" alt="Tweet" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></a></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><a href="https://www.youtube.com/primroseschoolsusa" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/media.jpg" width="30" height="31" alt="YT" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></a></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><a href="http://www.pinterest.com/primroseschools/" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/pinterest.jpg" width="30" height="31" alt="Pint" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></a></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><a href="https://www.primroseschools.com/blog" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/blog.jpg" width="30" height="31" alt="Blog" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
<td valign="top" align="left" width="293"><a href="https://www.youtube.com/watch?v=C50_m40p4WU&list=PL1oeDbuq5qBvR5ysNCJPmteEwAkkliOy1&index=4&t=0s<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.youtube.com_watch-3Fv-3DC50-5Fm40p4WU-26list-3DPL1oeDbuq5qBvR5ysNCJPmteEwAkkliOy1-26index-3D4-26t-3D0s&d=DwMGaQ&c=qwStF0e4-YFyvjCeML3ehA&r=3S6hnhxLuFFKrnroiuwtvAmlMsau5aZlXDzJBorGsBo&m=uqeksfuNT8cqq0mFwNO3tvcrURb8Ogg1oU3SwSdib9I&s=JpRoJd4CWuszyfEUREKuEZvVoCbnZdSJr_XwkAuPbwE&e=>" target="_blank" style="text-decoration:none;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/Video.jpg" width="293" height="187" alt="Video" style="display:block;" border="0"/></a></td>
<td valign="top" align="center" width="17"><table width="17" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" width="17"> </td>
</tr>
<tr>
<td height="1" width="17" valign="bottom" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" width="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" width="17" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="36" bgcolor="#f2f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" bgcolor="#f1f2f2"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" style="background-repeat:no-repeat;" width="800" height="135" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:135px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="25"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="36"> </td>
<td width="320" valign="top" align="left"><table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="22"> </td>
</tr>
<tr>
<td class="em_white" align="left" valign="top" style="font-family:'Century Gothic', Arial, sans-serif; font-size:8px; line-height:10px; color:#ffffff;"><span style="font-weight:bold;">Confidentiality Notice:</span> This message (including any attachments) contains information that may be confidential. Unless you are the intended recipient(or authorized to receive for the intended recipient), you may not read, print, retain, use, copy, distribute or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and destroy all copies of the original message (including any attachments). </td>
</tr>
</table></td>
<td width="300" valign="top" align="center"><table width="300" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="57"> </td>
</tr>
<tr>
<td valign="top" align="right" style="font-size:0px; line-height:0px;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/text_1.png" width="210" height="13" alt="The Leader in Early Education and Care." border="0" style="display:block; font-family:Arial, sans-serif; font-size:10px; line-height:22px; color:#ffffff;" /></td>
</tr>
</table></td>
<td width="5"></td>
<td width="91" valign="top" align="left"><a href="http://[{CenterWebsite}]" target="_blank" style="text-decoration:none; color:#ffffff;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_ftr.png" width="91" height="92" alt="PRIMROSE SCHOOLS" border="0" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" /></a></td>
<td width="48"> </td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="line-height:1px; font-size:1px;" width="800"><img alt="" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/spacer.gif" height="1" width="800" style="max-height:1px; min-height:1px; display:block; width:800px; min-width:800px;" border="0" /></td>
</tr>
</table></td>
</tr>
<!-- Emailer Ends Here //-->
</table>
<div style="display:none; white-space:nowrap; font:20px courier; color:#ffffff; background-color:#ffffff;"> </div>
</body>
</html>
我只需要在发送图像时将图像放到盒子里，并与其余模板对齐即可。
答案 0 :(得分：0)
正如Nisharg Shah所说，请使用内联CSS而不是创建样式标签。另外，通常不赞成使用!important，而烛光会使您的CSS非常混乱。