表格项目在响应时居中
我需要一些HTML电子邮件代码的帮助。一旦屏幕变小，我试图让“度假村盒子”成为中心。在手机上查看时的含义。我尝试了很多东西，但仍然无法弄明白。提前谢谢。
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"><!--<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
</title>
<style type="text/css">
@media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
font-size:90%;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
table {border-collapse: collapse;}
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #e4e4e4;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
max-width: 100%;
display:block;
height: auto;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
}
a {
text-decoration: none;
}
.more a {
color: white;
text-decoration: underline;
line-height: 2em;
font-family: sans-serif;
}
/*box text content*/
.resort-name{color: #000000; font-size:20px; line-height: 1em; font-family: sans-serif;text-align: center}
.city {color: #615657; font-size:12px;text-align: center}
.rate {color: #758b1d; font-size:20px; text-align: center}
.rate-s {color:#969696; text-align: center}
div.cont table
{
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #e4e4e4">
<center class="wrapper">
<div class="webkit" style="background-color:#010044">
<!-- VRI Logo-->
<table align="center" bgcolor="#E4E4E4" cellpadding="0" cellspacing="0" width="600px">
<tr>
<td><a href="http://www.8664myvacation.com"><img alt="vri-logo" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/f0966faf-85e8-4138-85cc-c5bacc31694e.png?ver=1492203807000" style="padding: 40px 0 15px 5px"></a>
</td>
</tr>
</table>
<!-- Insert Header Here -->
<table align="center" cellpadding="0" cellspacing="0" width="600px">
<tr align="justify">
<td><img alt="HEADER_IMG" class="header" src="https://mlsvc01-prod.s3.amazonaws.com/483a2626be/93869145-c989-4ae6-a9ce-6b48201903ab.jpg?ver=1493324994000">
</td>
</tr>
</table>
<!-- End Promo Code Section -->
<!-- Promo Code Section -->
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#010044" width="600">
<tr>
<td>
<h1 align="center" style="color: white; font-family:'Julius Sans One', sans-serif;">Promo Code: CALI</h1>
</td>
</tr>
</table>
<!-- End Promo Code Section -->
<!-- Resort Section-->
<div class="container">
<table align="center" cellpadding="0" cellspacing="0" width="95%">
<tbody>
<!-- Resort 1-->
<tr style="background-color: white; max-width: 270px; display: inline-block; margin: 7.5px;">
<td>
<a href="http://www.8664myvacation.com/rentResortInfoSheets.php?prop=tsr&promo=CALI" target="_blank"><img alt="Tahoe Seasons Resort" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/daabeb63-91a4-4c04-9811-b5b42d74ca58.png?ver=1483132264000" style="width: 270;" title="Tahoe Seasons Resort"></a>
<div style="padding:10px; text-align: center; valign: top; line-height: 1.25em;">
<!-- Resort name & city info --><span class="resort-name"><strong>Tahoe Seasons Resort</strong></span><br>
<span class="city">S. Lake Tahoe, CA</span> <!-- End resort name & city info -->
<!-- Horizontal rule -->
<hr style="width: 20%; align: center; margin-bottom: 10px">
<!-- End horizontal rule -->
<!-- Resort strikethrough rate --><span style="color: #000000; font-size:16px"><b>From</b> <s style="color:#969696">$122/night</s><br>
<br></span> <!-- End resort special rate -->
<!-- Resort special rate -->
<span style="color: #758b1d; font-size:20px"><b>$98/night</b></span> <!-- End resort special rate -->
</div>
</td>
</tr>
<!-- End Resort 1 -->
<!-- Resort 2-->
<tr style="background-color: white; max-width: 270px; display: inline-block; margin: 7.5px;">
<td>
<a href="http://www.8664myvacation.com/rentResortInfoSheets.php?prop=tsr&promo=CALI" target="_blank"><img alt="Tahoe Seasons Resort" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/daabeb63-91a4-4c04-9811-b5b42d74ca58.png?ver=1483132264000" style="width: 270;" title="Tahoe Seasons Resort"></a>
<div style="padding:10px; text-align: center; valign: top; line-height: 1.25em;">
<!-- Resort name & city info --><span class="resort-name"><strong>Tahoe Seasons Resort</strong></span><br>
<span class="city">S. Lake Tahoe, CA</span> <!-- End resort name & city info -->
<!-- Horizontal rule -->
<hr style="width: 20%; align: center; margin-bottom: 10px">
<!-- End horizontal rule -->
<!-- Resort strikethrough rate --><span style="color: #000000; font-size:16px"><b>From</b> <s style="color:#969696">$122/night</s><br>
<br></span> <!-- End resort special rate -->
<!-- Resort special rate -->
<span style="color: #758b1d; font-size:20px"><b>$98/night</b></span> <!-- End resort special rate -->
</div>
</td>
</tr>
<!-- End Resort 2 -->
</tbody>
</table>
<!-- ADS SECTION-->
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#010044" width="600">
<tr>
<td align="center" colspan="2" style="width: 275px; padding: 10px"><a href="http://www.8664myvacation.com/rentHome.php" target="_blank"><img alt="VRI_Ad" height="" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/24f8c582-4b04-4af6-9da6-2b0a182b54bf.png?ver=1486058446000" width="560"></a>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="width: 275px; padding: 10px;"><a href="https://www.avis.com/car-rental/profile/go.ac?D415600" target="_blank"><img alt="Avis_Ad.jpg"
height="" src="https://cdn2.hubspot.net/hubfs/401702/Avis_Ad.jpg" width="560"></a>
</td>
</tr>
</table>
<!-- START FOOTER=-->
<footer>
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#63656b;display:table;" width="600">
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<tr>
<td style="padding:20;">
<blockquote>
<p style="color:#ffffff; font-size:10px; font-family:Arial, sans-serif; text-align:left;">Terms and Conditions:<br>
PROMO CODE: CALI. Valid for new reservations booked between 5/3/2017 - 5/12/2017 for travel from 5/3/2017 - 8/31/2017. Please enter promo code CALI when making your
online booking to receive best available rate. Offer is based on availability and may not be available on all room types, Rates may be higher during holiday/event periods
and weekends. Cannot be combined with other offers and promotions and is subject to change without notice.</p>
</blockquote>
</td>
</tr>
<tr bgcolor="#63656B">
<td colspan="1" rowspan="1" style="padding:20px 0px;color:#000000;">
<table align="center" bgcolor="#63656B" border="0" cellpadding="0" cellspacing="0" style="background-color:#63656B;margin-bottom:10px;" width="600px">
<tr>
<td colspan="1" rowspan="1" style="color:#ffffff;font-weight:normal;vertical-align:top;font-size:12px;font-family:Helvetica, Arial, sans-serif;line-;text-align:center;"
valign="top">
<div style="line-height: 2em; display: inline;">
<center>
<a class="imgCaptionAnchor" href=
"http://r20.rs6.net/tn.jsp?f=001VYiWL5i82Ann9qRcISgE6Vp48wcxwnCtzt3iPLVLHE1Nb2KStjtSlaZpsSubBK-vW90CHuojdBnC8cqIWSmfwEfEosTJw_00x6b3LPt2nIOrLNT6cYshOKU511zD5sDgXwusveQqP6VGDBwGiG1Mv-fBkTEz9VTNaBX1_tVKgEQ7cQjl_S28CQ==&c=&ch="
shape="rect" target="_blank"><img alt="Vacation Resorts International" border="0" height="24" hspace="0" src=
"http://www.8664myvacation.com/eguest/images/vri-logo-footer.gif" vspace="0" width="40"></a><br>
<a href="#" shape="rect" style="color:rgb(255, 255, 255);font-weight:normal;text-decoration:none;">25510 Commercentre Dr., Suite 100<br>
Lake Forest, CA 92630<br>
866-469-8222</a><br>
©2017 Vacation Resorts International
</center>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End 4 Columns -->
<div class="" style="height: 40px; margin:0 auto; background-color: #e4e4e4; width: 100%">
</div>
<!-- spacer -->
</footer>
</div>
</div>
</center>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
您的tr是display: inline-block;并且已经有一个限制宽度，将它们放在框中，因此父级上的text-align: center会将这些元素置于中心位置。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"><!--<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
</title>
<style type="text/css">
@media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
font-size:90%;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
table {border-collapse: collapse;}
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #e4e4e4;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
max-width: 100%;
display:block;
height: auto;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
}
a {
text-decoration: none;
}
.more a {
color: white;
text-decoration: underline;
line-height: 2em;
font-family: sans-serif;
}
/*box text content*/
.resort-name{color: #000000; font-size:20px; line-height: 1em; font-family: sans-serif;text-align: center}
.city {color: #615657; font-size:12px;text-align: center}
.rate {color: #758b1d; font-size:20px; text-align: center}
.rate-s {color:#969696; text-align: center}
div.cont table
{
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #e4e4e4">
<center class="wrapper">
<div class="webkit" style="background-color:#010044">
<!-- VRI Logo-->
<table align="center" bgcolor="#E4E4E4" cellpadding="0" cellspacing="0" width="600px">
<tr>
<td><a href="http://www.8664myvacation.com"><img alt="vri-logo" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/f0966faf-85e8-4138-85cc-c5bacc31694e.png?ver=1492203807000" style="padding: 40px 0 15px 5px"></a>
</td>
</tr>
</table>
<!-- Insert Header Here -->
<table align="center" cellpadding="0" cellspacing="0" width="600px">
<tr align="justify">
<td><img alt="HEADER_IMG" class="header" src="https://mlsvc01-prod.s3.amazonaws.com/483a2626be/93869145-c989-4ae6-a9ce-6b48201903ab.jpg?ver=1493324994000">
</td>
</tr>
</table>
<!-- End Promo Code Section -->
<!-- Promo Code Section -->
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#010044" width="600">
<tr>
<td>
<h1 align="center" style="color: white; font-family:'Julius Sans One', sans-serif;">Promo Code: CALI</h1>
</td>
</tr>
</table>
<!-- End Promo Code Section -->
<!-- Resort Section-->
<div class="container resort-section">
<table align="center" cellpadding="0" cellspacing="0" width="95%" style="text-align: center;">
<tbody>
<!-- Resort 1-->
<tr style="background-color: white; max-width: 270px; display: inline-block; margin: 7.5px;">
<td>
<a href="http://www.8664myvacation.com/rentResortInfoSheets.php?prop=tsr&promo=CALI" target="_blank"><img alt="Tahoe Seasons Resort" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/daabeb63-91a4-4c04-9811-b5b42d74ca58.png?ver=1483132264000" style="width: 270;" title="Tahoe Seasons Resort"></a>
<div style="padding:10px; text-align: center; valign: top; line-height: 1.25em;">
<!-- Resort name & city info --><span class="resort-name"><strong>Tahoe Seasons Resort</strong></span><br>
<span class="city">S. Lake Tahoe, CA</span> <!-- End resort name & city info -->
<!-- Horizontal rule -->
<hr style="width: 20%; align: center; margin-bottom: 10px">
<!-- End horizontal rule -->
<!-- Resort strikethrough rate --><span style="color: #000000; font-size:16px"><b>From</b> <s style="color:#969696">$122/night</s><br>
<br></span> <!-- End resort special rate -->
<!-- Resort special rate -->
<span style="color: #758b1d; font-size:20px"><b>$98/night</b></span> <!-- End resort special rate -->
</div>
</td>
</tr>
<!-- End Resort 1 -->
<!-- Resort 2-->
<tr style="background-color: white; max-width: 270px; display: inline-block; margin: 7.5px;">
<td>
<a href="http://www.8664myvacation.com/rentResortInfoSheets.php?prop=tsr&promo=CALI" target="_blank"><img alt="Tahoe Seasons Resort" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/daabeb63-91a4-4c04-9811-b5b42d74ca58.png?ver=1483132264000" style="width: 270;" title="Tahoe Seasons Resort"></a>
<div style="padding:10px; text-align: center; valign: top; line-height: 1.25em;">
<!-- Resort name & city info --><span class="resort-name"><strong>Tahoe Seasons Resort</strong></span><br>
<span class="city">S. Lake Tahoe, CA</span> <!-- End resort name & city info -->
<!-- Horizontal rule -->
<hr style="width: 20%; align: center; margin-bottom: 10px">
<!-- End horizontal rule -->
<!-- Resort strikethrough rate --><span style="color: #000000; font-size:16px"><b>From</b> <s style="color:#969696">$122/night</s><br>
<br></span> <!-- End resort special rate -->
<!-- Resort special rate -->
<span style="color: #758b1d; font-size:20px"><b>$98/night</b></span> <!-- End resort special rate -->
</div>
</td>
</tr>
<!-- End Resort 2 -->
</tbody>
</table>
<!-- ADS SECTION-->
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#010044" width="600">
<tr>
<td align="center" colspan="2" style="width: 275px; padding: 10px"><a href="http://www.8664myvacation.com/rentHome.php" target="_blank"><img alt="VRI_Ad" height="" src=
"https://mlsvc01-prod.s3.amazonaws.com/483a2626be/24f8c582-4b04-4af6-9da6-2b0a182b54bf.png?ver=1486058446000" width="560"></a>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="width: 275px; padding: 10px;"><a href="https://www.avis.com/car-rental/profile/go.ac?D415600" target="_blank"><img alt="Avis_Ad.jpg"
height="" src="https://cdn2.hubspot.net/hubfs/401702/Avis_Ad.jpg" width="560"></a>
</td>
</tr>
</table>
<!-- START FOOTER=-->
<footer>
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#63656b;display:table;" width="600">
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<tr>
<td style="padding:20;">
<blockquote>
<p style="color:#ffffff; font-size:10px; font-family:Arial, sans-serif; text-align:left;">Terms and Conditions:<br>
PROMO CODE: CALI. Valid for new reservations booked between 5/3/2017 - 5/12/2017 for travel from 5/3/2017 - 8/31/2017. Please enter promo code CALI when making your
online booking to receive best available rate. Offer is based on availability and may not be available on all room types, Rates may be higher during holiday/event periods
and weekends. Cannot be combined with other offers and promotions and is subject to change without notice.</p>
</blockquote>
</td>
</tr>
<tr bgcolor="#63656B">
<td colspan="1" rowspan="1" style="padding:20px 0px;color:#000000;">
<table align="center" bgcolor="#63656B" border="0" cellpadding="0" cellspacing="0" style="background-color:#63656B;margin-bottom:10px;" width="600px">
<tr>
<td colspan="1" rowspan="1" style="color:#ffffff;font-weight:normal;vertical-align:top;font-size:12px;font-family:Helvetica, Arial, sans-serif;line-;text-align:center;"
valign="top">
<div style="line-height: 2em; display: inline;">
<center>
<a class="imgCaptionAnchor" href=
"http://r20.rs6.net/tn.jsp?f=001VYiWL5i82Ann9qRcISgE6Vp48wcxwnCtzt3iPLVLHE1Nb2KStjtSlaZpsSubBK-vW90CHuojdBnC8cqIWSmfwEfEosTJw_00x6b3LPt2nIOrLNT6cYshOKU511zD5sDgXwusveQqP6VGDBwGiG1Mv-fBkTEz9VTNaBX1_tVKgEQ7cQjl_S28CQ==&c=&ch="
shape="rect" target="_blank"><img alt="Vacation Resorts International" border="0" height="24" hspace="0" src=
"http://www.8664myvacation.com/eguest/images/vri-logo-footer.gif" vspace="0" width="40"></a><br>
<a href="#" shape="rect" style="color:rgb(255, 255, 255);font-weight:normal;text-decoration:none;">25510 Commercentre Dr., Suite 100<br>
Lake Forest, CA 92630<br>
866-469-8222</a><br>
©2017 Vacation Resorts International
</center>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End 4 Columns -->
<div class="" style="height: 40px; margin:0 auto; background-color: #e4e4e4; width: 100%">
</div>
<!-- spacer -->
</footer>
</div>
</div>
</center>
</body>
</html>
答案 1 :(得分：0)
如果您需要仅针对特定屏幕使用媒体查询的中心对齐文本，请将属性与td一起使用。
td（text-align：center）
避免使用内联样式，在css文件中使用样式。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？