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

Posted

技术标签:

【中文标题】在跨表行中添加图像以相对于其他非跨行行保持居中【英文标题】：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"  style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;"  ></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，我的答案对你有用..试试看。 【参考方案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"   ></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"   ></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"   ></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"   ></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"  style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;"  ></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"  style="display: block; margin-left: auto; margin-right: auto; vertical-align: baseline;"  >

这可能工作正常。

谢谢。

【讨论】：

做得更好，但图像仍然没有垂直居中 @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"  style="display: block; height: 70px; margin-left: auto; margin-right: auto; vertical-align: baseline;"  ></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"   ></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"   ></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>

【讨论】：

还是同样的问题

以上是关于在跨表行中添加图像以相对于其他非跨行行保持居中的主要内容，如果未能解决你的问题，请参考以下文章

我可以让非居中的 UILabel 保持其相对于正在缩放的​​ UIImageView 的位置吗？

设置缩小的相机预览以相对于宽度具有正确的图像纵横比

如何使背景位置固定并居中？

从动态添加的表行中获取数据

使用 PostgreSQL 将两个选择查询的结果添加到一个表行中

在 SQL 表行中迭代的最佳方法 - C#