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

概述尝试使用下面的电子邮件签名,但是我无法在跨区行中获取图像以保持所有电子邮件客户端的中心 – 它在JSBin中工作正常,但在GMail中加载时显示不均匀.我需要更改以使其在GMail中正确显示(居中)？ https://jsbin.com/yojinow/1/edit?html,output <table cellspacing="0" cellpadding="0" border="0" styl 尝试使用下面的电子邮件签名,但是我无法在跨区行中获取图像以保持所有电子邮件客户端的中心 – 它在JsBin中工作正常,但在GMail中加载时显示不均匀.我需要更改以使其在GMail中正确显示(居中)？

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

<table cellspacing="0" cellpadding="0" border="0" >    <tbody>        <tr>            <td rowspan="4"  vertical-align:"mIDdle" valign="mIDdle">              <a href="http://Google.com.au"><img ID="Templatelogo" data- src="https://dummyimage.com/70.png" alt="Company name"  height="100%" wIDth="100%"></a>            </td>            <td >              <Font >                John Doe              </Font>            </td>        </tr>        <tr>          <td >            <Font >              Accounts            </Font>          </td>        </tr>        <tr>          <td >            <Font >              T:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>&nbsp;|&nbsp;              F:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>            </Font>          </td>        </tr>        <tr>          <td >            <Font >              E:&nbsp;<a href="mailto:[email protected]" >[email protected]</a>            </Font>          </td>        </tr>    </tbody></table>

解决方法 图像必须具有display：block属性才能具有100％的高度
尝试替换display：inline-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" >	<tbody>		<tr>            <td rowspan="4"  vertical-align:"mIDdle" valign="mIDdle">              <a href="http://Google.com.au"><img ID="Templatelogo" data- src="https://dummyimage.com/70.png" alt="Company name" height="100%" wIDth="100%"></a>            </td>            <td >              <Font >                John Doe              </Font>            </td>		</tr>		<tr>          <td >            <Font >              Accounts            </Font>          </td>		</tr>		<tr>          <td >            <Font >              T:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>&nbsp;|&nbsp;              F:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>            </Font>          </td>		</tr>		<tr>          <td >            <Font >              E:&nbsp;<a href="mailto:[email protected]" >[email protected]</a>            </Font>          </td>		</tr>	</tbody></table><h3>With display: inline-block;</h3><table cellspacing="0" cellpadding="0" border="0" >	<tbody>		<tr>            <td rowspan="4"  vertical-align:"mIDdle" valign="mIDdle">              <a href="http://Google.com.au"><img ID="Templatelogo2" data- src="https://dummyimage.com/70.png" alt="Company name" height="100%" wIDth="100%"></a>            </td>            <td >              <Font >              Accounts            </Font>          </td>		</tr>		<tr>          <td >            <Font >              T:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>&nbsp;|&nbsp;              F:&nbsp;<a href="tel:+6199999999" >(02) 4399 9999</a>            </Font>          </td>		</tr>		<tr>          <td >            <Font >              E:&nbsp;<a href="mailto:[email protected]" >[email protected]</a>            </Font>          </td>		</tr>	</tbody></table>

总结

以上是内存溢出为你收集整理的html – 在表跨越的表行中添加图像以相对于其他非跨区行保持居中全部内容，希望文章能够帮你解决html – 在表跨越的表行中添加图像以相对于其他非跨区行保持居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。