在表格中居中表格
Lia*_*ley 3 html css html-table
我整个星期都在为这个我需要尽快发送的电子邮件而苦苦挣扎。我需要将这些产品图像与它们的描述放在一起，但我似乎无法浏览代理机构移交的这个模板。
我曾尝试更改显示属性并添加许多其他属性和方法，例如添加顶部填充（这在构建器中可以直观地工作，但在测试时它仍然卡在桌子的顶部）。这个电子邮件完全是用 HTML 制作的，带有内联 CSS 元素，并且为这些表指定了一个类，但是我在这个 HTML 中找不到它们的“全局”CSS 属性。
如果问题看起来含糊不清，我对所有这些都很陌生，所以很抱歉。我附上了问题的截图。
如您所见，产品图像与表格顶部对齐，无论我尝试什么，它们都无法移动到描述的中心：
.
<tr>
<td align="center" style="padding:0px 0px 50px 0px">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="m-dw" dir="rtl" width="540">
<tbody>
<tr>
<th align="left" class="m-db m-dw" dir="ltr" valign="top" width="270">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center"><img align="middle" alt="" src="https://d15knpe7ll4tpk.cloudfront.net/users/assets/139/images/649_EZVIZ_Camera_Range_Launch/cc599-250.png" style="width: 250px; max-width: 258px; display: block;" width="250"></td>
</tr>
</tbody>
</table>
</th>
<th align="left" class="m-db m-dw" dir="ltr" valign="middle" width="270">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="p-t20">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; font-weight:bold; line-height:24px; color:#004b93; text-align:left;"><strong><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">CC599<br>
EZVIZ C3W Huskey Air Wi-Fi Camera 0</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">1</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">80p 2.8mm Fixed Lens</span></span></strong></td>
</tr>
<tr>
<td style="padding:18px 0px 0px 0px; font-family: Helvetica, Arial, sans-serif; font-size:10.16px; font-weight:normal; line-height:16.9px; color:#; text-align:left;"><strong><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:bold">Features:</span></span></span></strong>
<ul>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:">Wi-Fi Bullet Camera</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">1080p Resolution</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Stand-Alone Camera</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Two-way audio up to 5 meters</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">30m IR Illumination</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">2.8mm Fixed Lens</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">IP66</span></span>
</span>
</li>
</ul>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px; color:#696969;">Hikvision code: CS-CV310-A0-1B2WFR (2.8mm)</span></span>
</td>
</tr>
<!-- Button:: change/replace the button URL twice -->
<tr>
<td align="left" style="padding:20px 0px 0px 0px">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="115">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f" fillcolor="#0a4a93"> <w:anchorlock/> <center> <![endif]--><a href="#" style="background-color:#0a4a93;color:#ffffff;display:inline-block;font-family: Helvetica, Arial, sans-serif;font-size:12.8px;font-weight:bold; letter-spacing:0.50px; text-transform:uppercase; line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;"
target="_blank">Order now </a>
<!--[if mso]>
</center> </v:rect> <![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Button -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>使用style="vertical-align: middle;"的，而不是valign="top"对th包含子表与图像：
<tr>
<td align="center" style="padding:0px 0px 50px 0px">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="m-dw" dir="rtl" width="540">
<tbody>
<tr>
<th align="left" class="m-db m-dw" dir="ltr" style="vertical-align: middle;" width="270">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center"><img align="middle" alt="" src="https://d15knpe7ll4tpk.cloudfront.net/users/assets/139/images/649_EZVIZ_Camera_Range_Launch/cc599-250.png" style="width: 250px; max-width: 258px; display: block;" width="250"></td>
</tr>
</tbody>
</table>
</th>
<th align="left" class="m-db m-dw" dir="ltr" valign="middle" width="270">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="p-t20">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; font-weight:bold; line-height:24px; color:#004b93; text-align:left;"><strong><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">CC599<br>
EZVIZ C3W Huskey Air Wi-Fi Camera 0</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">1</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">80p 2.8mm Fixed Lens</span></span></strong></td>
</tr>
<tr>
<td style="padding:18px 0px 0px 0px; font-family: Helvetica, Arial, sans-serif; font-size:10.16px; font-weight:normal; line-height:16.9px; color:#; text-align:left;"><strong><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:bold">Features:</span></span></span></strong>
<ul>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:">Wi-Fi Bullet Camera</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">1080p Resolution</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Stand-Alone Camera</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Two-way audio up to 5 meters</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">30m IR Illumination</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">2.8mm Fixed Lens</span></span>
</span>
</li>
<li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">IP66</span></span>
</span>
</li>
</ul>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px; color:#696969;">Hikvision code: CS-CV310-A0-1B2WFR (2.8mm)</span></span>
</td>
</tr>
<!-- Button:: change/replace the button URL twice -->
<tr>
<td align="left" style="padding:20px 0px 0px 0px">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="115">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f" fillcolor="#0a4a93"> <w:anchorlock/> <center> <![endif]--><a href="#" style="background-color:#0a4a93;color:#ffffff;display:inline-block;font-family: Helvetica, Arial, sans-serif;font-size:12.8px;font-weight:bold; letter-spacing:0.50px; text-transform:uppercase; line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;"
target="_blank">Order now </a>
<!--[if mso]>
</center> </v:rect> <![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Button -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>请注意：包含子表的单元格th 在您的代码中是 a ，但在语义上不适用 - 它绝对不包含 任何类型的标题，这就是th它的用途。
另外，我不明白为什么您使用的是嵌套表只包含一个行和单元格-您可以也简单地把图像转换成“父”小区（th我说的是，这应该宁可一td）和把它放在那里。
| 归档时间： |
|
| 查看次数： |
46 次 |
| 最近记录： |