[英]Vertically center text in HTML email
I'm trying to center vertically some text in a TD. 我正在尝试将TD中的某些文本垂直居中。 I've tried
valign: middle
in line styled, vertical-align: middle
in the style tags in the head. 我已经尝试过
valign: middle
的线型样式, vertical-align: middle
居于头部的样式标签中。
I can't figure out why this won't work as it seems to be working on my desktop version. 我无法弄清楚为什么这种方法不起作用,因为它似乎可以在我的桌面版本上使用。 Below is the code w/some css and the HTML segment.
以下是带有某些CSS的代码和HTML段。 This will be rendered in mobile so my focus is Android and iPhone.
这将在移动设备中呈现,因此我的重点是Android和iPhone。
@media screen and (min-width: 481px){
.hideOnDesktop{display: none !important;
}
}
@media screen and (max-width: 480px){
.iosMiddle{vertical-align: middle;}
.hideMobile{display: none !important;}
.showMobile{display: block !important;}
<tr>
<td>
<table bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121">
<tr>
<td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"><img src="images/image.jpg" width="112" height="121" alt="" style="display: block;width: 112px; height:auto;" border="0" ></td>
<td class="hideMobile" width="247" height="121" valign="middle" bgcolor="#ed1848" style="text-align: left; font-size: 30px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;">Thanks for <br>your interest.</td>
<!--[if !mso 9]><!-->
<td class="showMobile hideOnDesktop iosMiddle" width="247" height="121" valign="middle" bgcolor="#ed1848" style="display: none; text-align: left; font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; white-space: nowrap">Thanks for your interest.</td>
<!--<![endif]-->
</tr>
</table>
</td>
</tr>
So... I figured it out! 所以...我想通了! You need to use the show/hide classes on the container and not on the TD itself in order to make the vertical center work.
您需要在容器上而不是在TD本身上使用show / hide类,以使垂直中心起作用。
<tr>
<td>
<table class="hideMobile" bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121">
<tr>
<td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"><img src="image.jpg" width="112" height="121" alt="" style="display: block;width: 112px; height:auto;" border="0" ></td>
<td class="hideMobile" width="247" height="121" valign="middle" bgcolor="#ed1848" style="text-align: left; font-size: 30px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; -webkit-text-size-adjust: none; mso-line-height-rule: exactly;">Thanks for <br>your interest.</td>
</tr>
</table>
<!--[if !mso 9]><!-->
<table class="showMobile hideOnDesktop" bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121" style="display: none;">
<tr>
<td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"><img src="image.jpg" width="112" height="121" alt="" style="display: block;width: 112px; height:auto;" border="0" ></td>
<td border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ed1848" align="center" valign="middle" style="color: #ffffff; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; mso-line-height-rule: exactly; white-space: nowrap;">Thanks for your interest.</td>
</tr>
</table>
<!--<![endif]-->
</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.