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

【问题标题】：Adding image in table spanned table row to stay centered relative to other non-spanned rows在跨表行中添加图像以相对于其他非跨行行保持居中
【发布时间】：2019-01-09 16:05:09
【问题描述】：

尝试使用下面的电子邮件签名，但我无法让跨行中的图像在所有电子邮件客户端中保持居中 - 它在 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>

【问题讨论】：

不均匀是什么意思？不居中的时候可以给个截图吗？
@Saeed 我已更新问题以显示位置 - 请查看黄色突出显示的矩形
@Matthew Malone，检查我的答案.. 如果不起作用，请将您的结果发送给我。
对不起，即使有你的分数，我也不知道你要什么。
@Matthew Malone，我的答案对你有用..试试看。

标签： html css html-table

【解决方案1】：

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>

【讨论】：

【解决方案2】：

我最喜欢的对齐事物的 CSS 属性之一是 transform，因为它既快速又简单。如果您希望在移动设备上查看此内容，我建议您不要使用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>

【讨论】：

【解决方案3】：

您指定 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:+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>

【讨论】：

【解决方案4】：

将图像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%">

这可能工作正常。

谢谢。

【讨论】：

做得更好，但图像仍然没有垂直居中
@Matthew Malone，更新图片样式。我已经更新了我的答案...试试看
@MatthewMalone，由于 CSS 媒体查询不完全支持电子邮件模板，因此引发了此类问题。因此，您需要调整字体和图像大小，因为它们也与移动设备匹配......有看看这个。我做了一些小的调整。 jsfiddle.net/Sampath_Madhuranga/20p8eobx/2
@MatthewMalone，检查这个小提琴。现在它应该可以工作了。 jsfiddle.net/Sampath_Madhuranga/20p8eobx/30
@MatthewMalone，你检查过我的小提琴吗？

【解决方案5】：

请使用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>

【讨论】：

在 Gmail 上查看时仍然有同样的问题

【解决方案6】：

图像必须具有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>

【讨论】：

还是同样的问题