在表格中居中表格

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

我曾尝试更改显示属性并添加许多其他属性和方法,例如添加顶部填充(这在构建器中可以直观地工作,但在测试时它仍然卡在桌子的顶部)。这个电子邮件完全是用 HTML 制作的,带有内联 CSS 元素,并且为这些表指定了一个类,但是我在这个 HTML 中找不到它们的“全局”CSS 属性。

如果问题看起来含糊不清,我对所有这些都很陌生,所以很抱歉。我附上了问题的截图。

如您所见,产品图像与表格顶部对齐,无论我尝试什么,它们都无法移动到描述的中心:

.

<tr>
  <td align="center">
    <table align="center" border="0" cellpadding="0" cellspacing="0" dir="rtl" width="540">
      <tbody>
        <tr>
          <th align="left" 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" width="250"></td>
                </tr>
              </tbody>
            </table>
          </th>
          <th align="left" dir="ltr" valign="middle" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tbody>
                        <tr>
                          <td><strong><span><span>CC599<br>
                                                                                                        EZVIZ C3W Huskey Air Wi-Fi Camera 0</span></span><span><span>1</span></span><span><span>80p 2.8mm Fixed Lens</span></span></strong></td>
                        </tr>
                        <tr>
                          <td><strong><span><span><span>Features:</span></span></span></strong>
                            <ul>
                              <li><span><span><span>Wi-Fi Bullet Camera</span></span>
                                </span>
                              </li>
                              <li><span><span><span>1080p Resolution</span></span>
                                </span>
                              </li>
                              <li><span><span><span>Stand-Alone Camera</span></span>
                                </span>
                              </li>
                              <li><span><span><span>Two-way audio up to 5 meters</span></span>
                                </span>
                              </li>
                              <li><span><span><span>30m IR Illumination</span></span>
                                </span>
                              </li>
                              <li><span><span><span>2.8mm Fixed Lens</span></span>
                                </span>
                              </li>
                              <li><span><span><span>IP66</span></span>
                                </span>
                              </li>
                            </ul>
                            <span><span>Hikvision code: CS-CV310-A0-1B2WFR (2.8mm)</span></span>
                          </td>
                        </tr>
                        <!-- Button:: change/replace the button URL twice -->
                        <tr>
                          <td align="left">
                            <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="#" stroke="f" fillcolor="#0a4a93">                                                                                      <w:anchorlock/>                                                                                     <center>                                                                                        <![endif]--><a href="#"
                                        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">
    <table align="center" border="0" cellpadding="0" cellspacing="0" dir="rtl" width="540">
      <tbody>
        <tr>
          <th align="left" dir="ltr" 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" width="250"></td>
                </tr>
              </tbody>
            </table>
          </th>
          <th align="left" dir="ltr" valign="middle" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tbody>
                        <tr>
                          <td><strong><span><span>CC599<br>
                                                                                                        EZVIZ C3W Huskey Air Wi-Fi Camera 0</span></span><span><span>1</span></span><span><span>80p 2.8mm Fixed Lens</span></span></strong></td>
                        </tr>
                        <tr>
                          <td><strong><span><span><span>Features:</span></span></span></strong>
                            <ul>
                              <li><span><span><span>Wi-Fi Bullet Camera</span></span>
                                </span>
                              </li>
                              <li><span><span><span>1080p Resolution</span></span>
                                </span>
                              </li>
                              <li><span><span><span>Stand-Alone Camera</span></span>
                                </span>
                              </li>
                              <li><span><span><span>Two-way audio up to 5 meters</span></span>
                                </span>
                              </li>
                              <li><span><span><span>30m IR Illumination</span></span>
                                </span>
                              </li>
                              <li><span><span><span>2.8mm Fixed Lens</span></span>
                                </span>
                              </li>
                              <li><span><span><span>IP66</span></span>
                                </span>
                              </li>
                            </ul>
                            <span><span>Hikvision code: CS-CV310-A0-1B2WFR (2.8mm)</span></span>
                          </td>
                        </tr>
                        <!-- Button:: change/replace the button URL twice -->
                        <tr>
                          <td align="left">
                            <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="#" stroke="f" fillcolor="#0a4a93">                                                                                      <w:anchorlock/>                                                                                     <center>                                                                                        <![endif]--><a href="#"
                                        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)和把它放在那里。


以上是在表格中居中表格的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>