尝试使用下面的电子邮件签名,但我无法让跨行中的图像在所有电子邮件客户端中保持居中 - 它在 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: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> |
F: <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: <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>
最佳答案
图片必须有 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: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> |
F: <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: <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: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> |
F: <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: <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>
关于html - 在表跨表行中添加图像以相对于其他非跨行保持居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51644216/