HTML 电子邮件 - 将图像置于已定义宽度和高度的元素内

Question

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

但是，在 HTML 电子邮件中:代码无法按预期工作。

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

这是电子邮件中的样子:

我的最终目标是:在 HTML 电子邮件中将图像在定义了宽度和高度的元素内水平和垂直居中(所需输出的示例在下面的可运行代码段中)。

<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

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