- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<!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/
我正在尝试获取从过去的 startposition/location 到当前移动的 currentposition/location 的距离(以米为单位)。 我确实有工作正常的currentposit
所以我有一堆绝对覆盖的 div。用户通过在叠加层上拖动来创建方形 div。如果您要创建一个 div,然后放大和缩小,div 会保持在同一位置,因为它对叠加层是绝对的,如前所述。 然而问题就出在这里。您
我想找到 View 在显示屏幕上的位置。 为此,我使用了 view.getLeft() 、view.getBottom() 、view.getRight() 等方法> , view.getTop()。
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
所以我有一个名为 MARKS 的表,我有这些列 STUDENT_ID, CLASSFORM_NAME, ACADEMIC_YEAR, TERM, SUBJECT_NAME, TOTAL_MARKS
我有一个问题我无法理解,请帮助: 我开发了带有图像的 html 页面,并使用 jQuery UI 帮助使它们可拖动,我将这些图像位置设置为相对位置并给出了左侧和顶部像素,这是页面的链接 http://
我正在尝试创建一个 CSS 动画,它在 sprite 表中循环播放 16 个图像,给人一种幽灵“漂浮”的错觉。动画通过在 background-position 位置之间移动以显示不同状态的幽灵来实现
我正在创建这个网站的 WebView https://nearxt.com/打开时询问位置但是当我使用此链接在 flutter 中创建 webview 时那么它就无法定位我还在应用程序中定义了位置,但
我正在以编程方式创建一个需要跨越 2 个屏幕的窗口。正在创建的窗口的大小是正确的,但窗口大约从第一个屏幕的一半开始。我可以将它拖回第一个屏幕的开头,NSWindow 非常适合。 我只需要知道在窗口的起
位置“/”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值,从而导致一个“空”页面 //App.js File import { BrowserRouter as Router, Routes
我有一个运行 Ubuntu 和 Apache 的 VPS 例如,假设地址是:5.5.5.5 在 VPS 上,我有一个名为 eggdrop 的用户(除了我的 root 用户)。 用户 eggdrop 有
我有一个 JLabel与 ImageIcon ,我使用 setIcon() JLabel中的函数. ImageIcon然后上来,坐在我的JLabel 的文字左侧.是否有可能拥有 ImageIcon在文
我的图中有节点,它们的 xlabels 位于它们的左上方。我怎样才能改变这个位置?我希望 xlabels 正好位于节点本身的旁边。 最佳答案 xlp是你想要的属性,但它没有做任何事情。 你不能改变位置
我对基本的 VIM 功能有疑问:(我尝试谷歌搜索但找不到答案) 如何列出所有自定义功能。(我做了 :function 并且不能找到我的自定义函数) 如何获得自定义函数列表中的函数(或它们的存储位置)。
我是 PHP 的新手,虽然我一直在搜索,但我不知道该怎么做。 我知道可以使用 Location("some page") 进行重定向。我还读到,只要没有向用户显示任何内容,它就可以工作。 我想做的是:
如果在 jgrowl.css 中位置更改为“center”,我如何将其覆盖为默认值,即“top-right” $.jGrowl(data, { header: 'data', an
我需要根据用户是否滑动屏幕顶部、屏幕中间或屏幕底部来触发不同的事件。我正在尝试找出最好/最简单的方法来做到这一点,因为我很确定没有办法从 UISwipeGestureRecognizer 获取位置。
我需要枚举用delphi编写的外部应用程序中使用的类 ,因此我需要访问VMT表以获取该信息,但是我找不到任何有关如何在exe(由delphi生成)文件中找到VMT(虚拟方法表)的位置(地址)的文档。
在 D2010 (unicode) 中是否有像 Pos 这样不区分大小写的类似函数? 我知道我可以使用 Pos(AnsiUpperCase(FindString), AnsiUpperCase(Sou
我正在尝试为我的reveal.js 演示文稿制作一个标题,该标题会粘贴在屏幕顶部。标题中的内容在每张幻灯片的基础上都是动态的,因此我必须将标记放在 section 标记中。 显然,如果标记在 sect
我是一名优秀的程序员,十分优秀!