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

Question

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

https://jsbin.com/yojinow/1/edit?html,output

<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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
        </tr>
    </tbody>
</table>

Answer 1

图像必须具有display: block属性才能具有100％的高度
尝试将图像中的display: inline-block;替换为display: block;
看看这个例子

#TemplateLogo{
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: baseline;
}

#TemplateLogo2{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: baseline;
}

tbody{
  display:block;
  border: 1px solid red;
}

h3{
  font-family: Arial;
}

<h3>With display: block;</h3>
<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" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
		</tr>
	</tbody>
</table>

<h3>With display: inline-block;</h3>
<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="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
		</tr>
	</tbody>
</table>

Answer 2

将图像height的值更改为auto。

<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="auto" width="100%">

这可能很好。

谢谢。

Answer 3

请使用CSS：

 height: auto; // On the <td rowspan="4"...>

并在图像上

 display: block;
 height: 70px;

。

<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
    <tbody>
        <tr>
            <td rowspan="4" style="width: 70px; height: auto; 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: block; height: 70px; 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
                    F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
                </font>
            </td>
        </tr>
    </tbody>
</table>

Answer 4

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

libsrt.so

Answer 5

transform是我最喜欢的用于对齐内容的CSS属性之一，因为它非常快捷。如果您希望在移动设备上查看此内容，建议您不要使用px，而应使用em或类似的东西。

table{
  border: 1px solid red;
}
img {
  transform: translateY(0.15em);
}

<h3>With display: block;</h3>
<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" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
		</tr>
	</tbody>
</table>

<h3>With display: inline-block;</h3>
<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="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
		</tr>
	</tbody>
</table>

Answer 6

table{
  border: 1px solid red;
}
img {
  transform: translateY(0.15em);
}
<h3>With display: block;</h3>
<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" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
        </tr>
    </tbody>
</table>

<h3>With display: inline-block;</h3>
<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="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" 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:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a>&nbsp;|&nbsp;
              F:&nbsp;<a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</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:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a>
            </font>
          </td>
        </tr>
    </tbody>
</table>