在 table 中居中 table

Question

整个星期我都在为我需要尽快发送的电子邮件而苦苦挣扎。我需要将这些产品图片与它们的描述放在一起，但我似乎无法浏览代理机构提供的这个模板。

我已经尝试更改显示属性并添加许多其他属性和方法，例如添加顶部填充（这在构建器中可视化，但在测试时它仍然卡在 table 的顶部）。该电子邮件完全由 HTML 和内联 CSS 元素组成，并且有一个 class 表示这些 table，但是我找不到 'global' CSS 在此 HTML.

中的属性

我对这一切还很陌生，如果这个问题看起来含糊不清，我深表歉意。我已附上问题的屏幕截图。

如您所见，产品图片与 table 的顶部对齐，无论我如何尝试，它们都无法移动到描述的中心：

.

<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>

Answer 1

在 th 上使用 style="vertical-align: middle;" 而不是 valign="top"，其中包含带有图像的子 table：

<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>

请注意：包含子 table 的单元格在您的代码中是 th，但在语义上不适用 - 它绝对不包含 header 任何类型，这就是 th 的用途。

此外，我不明白您为什么要使用仅包含一个行和单元格的嵌套 table - 您也可以简单地将图像放入“父”单元格（我正在谈论的 th，应该是 td）并将其居中。

在 table 中居中 table

Centering a table within a table

html

css

html-table