<!DOCTYPE>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cantarell:400,700|Oswald:400,700|Roboto+Condensed:400,700" rel="stylesheet" />
<style type="text/css" media="screen">
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
min-width: 100% !important;
width: 100% !important;
background: #f1f2f3;
-webkit-text-size-adjust: none
}
a {
color: #825162;
text-decoration: none
}
p {
padding: 0 !important;
margin: 0 !important
}
img {
-ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */
}
[style*="Cantarell"] {
font-family: 'Cantarell', sans-serif !important;
}
[style*="Oswald"] {
font-family: 'Oswald', sans-serif !important;
}
[style*="RobotoCondensed"] {
font-family: 'RobotoCondensed', sans-serif !important;
}
.text-c a,
.text a {
color: #6e3e4f !important;
}
.text-btn a {
color: #ffffff !important;
}
/* Mobile styles */
@@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
table[class='mobile-shell'] {
width: 100% !important;
min-width: 100% !important;
}
table[class='center'] {
margin: 0 auto !important;
}
td[class='td'] {
width: 100% !important;
min-width: 100% !important;
}
div[class='mobile-br-5'] {
height: 5px !important;
}
div[class='mobile-br-10'] {
height: 10px !important;
}
div[class='mobile-br-15'] {
height: 15px !important;
}
th[class='m-td'],
td[class='m-td'],
div[class='hide-for-mobile'],
span[class='hide-for-mobile'] {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
min-height: 0 !important;
}
span[class='mobile-block'] {
display: block !important;
padding-top: 10px;
}
div[class='img-m-center'] {
text-align: center !important;
}
div[class='fluid-img'] img,
td[class='fluid-img'] img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
th[class='column'],
th[class='column-top'],
th[class='column-bottom'],
th[class='column-dir'] {
float: left !important;
width: 100% !important;
display: block !important;
}
td[class='content-spacing'] {
width: 15px !important;
}
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#f1f2f3; -webkit-text-size-adjust:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f2f3">
<tr>
<td align="center" valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0"
<div class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left"><img src="#" border="0" width="600" height="12" alt="" /></div>
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left">
<p valign="top" class="bodyContent" mc:edit="body_content00" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #3f3f3f;font-family: Cantarell,Verdana,DejaVu Sans;font-size: 15px;font-weight: 400;line-height: 22px;text-align: left;margin:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="35"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- Hero Image -->
<div class="fluid-img" style="font-size:0pt; line-height:0pt;position: relative;text-align: center;left: 0;top: 0;">
<img src="https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg" border="0" width="530" height="220" alt="" />
<img src="https://s26.postimg.org/r1deesd55/a_com_logo_cllb.png" border="0" width="120" height="50" style="position: absolute; top: 50%;left: 40%;text-align: center;" alt=""/>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="21" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END Hero Image --> <!-- TItle -->
<!-- <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="20" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div> -->
<!-- END TItle --><!-- TItle -->
<div class="h2" style="color:#444444; font-family:Tahoma, sans-serif, 'Oswald'; font-size:28px; line-height:41px; text-align:center; font-weight:normal"> Lorem Ipsum</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="20" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END TItle --> <!-- Pre-header -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="4" bgcolor="#825162"></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15"></td>
<td class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> <em>Lorem Ipsum is simply dummy</em> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="35" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END Pre-header -->
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="40" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-btn" style="color:#ffffff; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:20px; text-align:center; border-radius:2px; padding:8px 20px" bgcolor="#825162"> <a href="abcd.com" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">A B C D</span></a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="35" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td bgcolor="#cccccc" height="1" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="30" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="24" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f2f3">
<tbody>
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction: rtl">
<tbody>
<tr>
<th class="column-dir" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; direction:ltr; Margin:0" dir="ltr" width="119">
</th>
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="15"></th>
<th class="column-dir" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; direction:ltr; Margin:0" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text2" style="color:#343434; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:12px; line-height:16px; text-align:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<strong>Reference Number</strong>: Lorem Ipsum <br> <strong>Expiration Date</strong>: Lorem Ipsum <br>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="28" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="35"></td>
</tr>
</tbody>
</table>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
亚马逊 Logo 图像未在邮件中居中。当我在手机中发送此电子邮件并在 gmail 客户端中打开它时。然后图像位置不居中，在平板电脑中也不居中。我如何才能将亚马逊 Logo 图像置于为 Logo 制作的白框中。
请帮助我在桌面和其他移动设备上将图像置于白框中的中心。
我用过测试邮件客户端putsmail.com，amazon logo仅供引用。
最佳答案
欢迎来到 StackOverflow。我相信这就是您所追求的。我将 header 重新编码为 VML + HTML。 VML 允许您在 Outlook 中添加背景图像。您可以使用媒体查询来调整移动设备上的图像间距。
注意:您的媒体查询中有 Gmail 不喜欢的空格，我已经删除了多余的空格，因此它现在应该也适用于 Gmail(除非 Gmail 发现它有任何其他问题)。
<!DOCTYPE>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cantarell:400,700|Oswald:400,700|Roboto+Condensed:400,700" rel="stylesheet" />
<style type="text/css" media="screen">
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
min-width: 100% !important;
width: 100% !important;
background: #f1f2f3;
-webkit-text-size-adjust: none
}
a {
color: #825162;
text-decoration: none
}
p {
padding: 0 !important;
margin: 0 !important
}
img {
-ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */
}
[style*="Cantarell"] {
font-family: 'Cantarell', sans-serif !important;
}
[style*="Oswald"] {
font-family: 'Oswald', sans-serif !important;
}
[style*="RobotoCondensed"] {
font-family: 'RobotoCondensed', sans-serif !important;
}
.text-c a,
.text a {
color: #6e3e4f !important;
}
.text-btn a {
color: #ffffff !important;
}
/* Mobile styles */
@@media only screen and (max-device-width:480px), only screen and (max-width:480px) {
table[class='mobile-shell'] {
width: 100% !important;
min-width: 100% !important;
}
table[class='center'] {
margin: 0 auto !important;
}
td[class='td'] {
width: 100% !important;
min-width: 100% !important;
}
div[class='mobile-br-5'] {
height: 5px !important;
}
div[class='mobile-br-10'] {
height: 10px !important;
}
div[class='mobile-br-15'] {
height: 15px !important;
}
th[class='m-td'],
td[class='m-td'],
div[class='hide-for-mobile'],
span[class='hide-for-mobile'] {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
min-height: 0 !important;
}
span[class='mobile-block'] {
display: block !important;
padding-top: 10px;
}
div[class='img-m-center'] {
text-align: center !important;
}
div[class='fluid-img'] img,
td[class='fluid-img'] img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
th[class='column'],
th[class='column-top'],
th[class='column-bottom'],
th[class='column-dir'] {
float: left !important;
width: 100% !important;
display: block !important;
}
td[class='content-spacing'] {
width: 15px !important;
}
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#f1f2f3; -webkit-text-size-adjust:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f2f3">
<tr>
<td align="center" valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
<div class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left"><img src="#" border="0" width="600" height="12" alt="" /></div>
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left">
<p valign="top" class="bodyContent" mc:edit="body_content00" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #3f3f3f;font-family: Cantarell,Verdana,DejaVu Sans;font-size: 15px;font-weight: 400;line-height: 22px;text-align: left;margin:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="35"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- Hero Image -->
<div class="fluid-img" style="font-size:0pt; line-height:0pt;text-align: center;left: 0;top: 0;">
<!--<img src="https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg" border="0" width="530" height="220" alt="" />-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td background="https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg" style="background: url('https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg'); background-image: url('https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg'); ">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:220px;">
<v:fill type="frame" src="https://s26.postimg.org/xb42o1n61/b2b-email-hero-container_1.jpg" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="120" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding:130px 0px 75px 0px;"><img src="https://s26.postimg.org/r1deesd55/a_com_logo_cllb.png" border="0" width="120" style="text-align: center;" alt=""/></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="21" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END Hero Image --> <!-- TItle -->
<!-- <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="20" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div> -->
<!-- END TItle --><!-- TItle -->
<div class="h2" style="color:#444444; font-family:Tahoma, sans-serif, 'Oswald'; font-size:28px; line-height:41px; text-align:center; font-weight:normal"> Lorem Ipsum</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="20" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END TItle --> <!-- Pre-header -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="4" bgcolor="#825162"></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15"></td>
<td class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> <em>Lorem Ipsum is simply dummy</em> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="35" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</table>
</div>
<!-- END Pre-header -->
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<div class="text" style="color:#666666; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:22px; text-align:left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="40" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-btn" style="color:#ffffff; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:16px; line-height:20px; text-align:center; border-radius:2px; padding:8px 20px" bgcolor="#825162"> <a href="abcd.com" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">A B C D</span></a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="35" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td bgcolor="#cccccc" height="1" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="30" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="24" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f2f3">
<tbody>
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction: rtl">
<tbody>
<tr>
<th class="column-dir" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; direction:ltr; Margin:0" dir="ltr" width="119">
</th>
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="15"></th>
<th class="column-dir" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; direction:ltr; Margin:0" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text2" style="color:#343434; font-family:Tahoma, sans-serif, 'Cantarell'; font-size:12px; line-height:16px; text-align:left">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
<strong>Reference Number</strong>: Lorem Ipsum <br> <strong>Expiration Date</strong>: Lorem Ipsum <br>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tbody>
<tr>
<td height="28" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td>
</tr>
</tbody>
</table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="35"></td>
</tr>
</tbody>
</table>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>希望上面的代码是你想要的。
关于css - 响应式电子邮件图像位置问题(中心)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46284265/