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

【问题标题】：Single cell row with vertically centered image and text?具有垂直居中图像和文本的单个单元格行？
【发布时间】：2016-09-24 19:59:08
【问题描述】：

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

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

这是我的代码（有很多内联样式，我提前道歉）。请注意这一单列行，它是 Nicole Merlin 的 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>

【问题讨论】：

标签： html css email html-email

【解决方案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>

【讨论】：

完美修复，谢谢！我想我看这封邮件太久了，哈哈。
更新，遗憾的是 Outlook 2007+ 无法正常工作。文本仍显示在单元格底部
似乎应该 (campaignmonitor.com/css) 但我会将文本部分包装在 span 标签中，就像双重安全检查一样，
我尝试了跨度标签（甚至为那些跨度标签重复样式但没有运气
那我猜你只需要把整个事情作为一个图像来做......对不起。

【解决方案2】：

适用于所有电子邮件客户端的最佳解决方案是促使他们考虑将特定图像与其他文本内联。这可以通过将文本和图像放在同一行 <tr> 的多个 <td> 中来完成。

这将使您能够定义每个标签的确切高度、宽度和任何其他您想要的属性。

检查以下内容：

<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">
            <table border="0" cellpadding="0" cellspacing="0">
              <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 
                </td>
                <td valign="middle" style="vertical-align: middle !important;padding:0;">
                  <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />
                </td>
                <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;"> OF SAFE SLEEP FOR DOGS
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【讨论】：