Question

我在下面有此代码。
如果我在浏览器上运行此代码，一切正常。

但是，在HTML电子邮件中：该代码无法正常工作。

高度似乎是主要问题，在HTML电子邮件中，我自动配置的height变成了min-height。

这是电子邮件中的样子：

我的最终目标是：将图像水平和垂直居中放置在HTML电子邮件中的宽度和高度已定义的元素内（所需输出的示例位于下面的可运行代码段中）。 / p>

<table>

  <tbody>
    <tr>
      <td style="padding-top:10px;">
        <p style="text-align:center;height: 105px;background-color:#282828;width: 80px;" height="85">
          <span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
          <img width="50" height="75" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
        </p>
      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>

  </tbody>
</table>

Answer 1

大多数电子邮件客户端对display和position属性没有很好的支持。获得最大客户端兼容性的最安全方法是使用嵌套表。使用bgcolor，height，valign之类的样式属性也可以帮助较旧的电子邮件客户端。

<table>
  <tbody>
    <tr>

      <td style="padding-top:10px;">

        <table border="0" height="105">

          <tr>
            <td align="center" valign=“middle” width="80" height="85" bgcolor="#282828">
              <img width="50" height="75" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
            </td>
          </tr>

        </table>

      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>
  </tbody>
</table>

Answer 2

<table>

  <tbody>
    <tr>
      <td style="padding-top:10px;">
        <p style="text-align:center;height: 105px;background-color:#282828;width: 80px;vertical-align: middle; display: table-cell;" height="85">
          <span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
          <img width="50" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
        </p>
      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>

  </tbody>
</table>

HTML电子邮件-在已定义宽度和高度的元素内居中放置图像

2 个答案: