html - 具有垂直居中图像和文本的单个单元格行？

Question

我尝试在堆栈中搜索解决方案，但我找到的答案都没有解决我的问题。

我正在开发一封电子邮件，我想要一个单元格行，其中包含文本和文本之间的图像。单元格高度是图像的全高，但我希望文本垂直居中。文本现在齐平在底部

这是我的代码(有很多内联样式，我提前道歉)。请注意，这是 fluid hybrid approach 的一部分的单列行由妮可梅林。

<tr>
      <td valign="middle" bgcolor="#e2f4ff" style="padding:0">
        <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;"> 
          <tr>
            <td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
              THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS
            </td>
          </tr>              
        </table>
      </td>
    </tr>

Answer 1

只需垂直对齐图像即可。

<table>
  <tr>
    <td valign="middle" bgcolor="#e2f4ff" style="padding:0">
      <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
        <tr>
          <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
            THE
            <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS
          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>