html - 在跨表行中添加图像以相对于其他非跨行行保持居中

Question

尝试使用下面的电子邮件签名，但我无法让跨行中的图像在所有电子邮件客户端中保持居中 - 它在 JSBin 中工作正常，但在 GMail 中加载时显示不均匀。我需要更改什么才能使其在 GMail 中正确显示（居中）？

https://jsbin.com/yojinow/1/edit?html，输出

<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
    <tbody>
        <tr>
            <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
              <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%"></a>
            </td>
            <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
              <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
                John Doe
              </font>
            </td>
        </tr>
        <tr>
          <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
            <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
              Accounts
            </font>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
            <font style="color: #515151; font-size: 10pt; font-family: Arial">
              T:&nbsp;<a href="tel:[phone]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[phone]</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:[phone]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[phone]</a>
            </font>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
            <font style="color: #515151; font-size: 10pt; font-family: Arial">
              E:&nbsp;<a href="mailto:[e-mail]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[e-mail]</a>
            </font>
          </td>
        </tr>
    </tbody>
</table>

标签： htmlcsshtml-table

Answer 1

您指定 4 列，每列 18 像素，但图像所在的列指定 70 像素。它应该是 72 像素（18 像素 x 4 = 72 像素）（列和图像）。如果要在基线上对齐文本，可能需要将文本更改为基线。

<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
        <tbody>
            <tr>
                <td rowspan="4" style="width: 72px; height: 72px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
                  <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%"></a>
                </td>
                <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
                  <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
                    John Doe
                  </font>
                </td>
            </tr>
            <tr>
              <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
                <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
                  Accounts
                </font>
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
                <font style="color: #515151; font-size: 10pt; font-family: Arial">
                  T:&nbsp;<a href="tel:[phone]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[phone]</a>&nbsp;|&nbsp;
                  F:&nbsp;<a href="tel:[phone]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[phone]</a>
                </font>
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
                <font style="color: #515151; font-size: 10pt; font-family: Arial">
                  E:&nbsp;<a href="mailto:[e-mail]" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">[e-mail]</a>
                </font>
              </td>
            </tr>
        </tbody>
    </table>