Question

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

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

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

Answer 1

只需垂直对齐图像。

＆＃13;

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

＆＃13;

Answer 2

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

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

检查以下内容：

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

单细胞行具有垂直居中的图像和文本？

2 个答案: