Attempting to vertically center text in a TD, I've experimented with valign: middle inline styling and vertical-align: middle within the style tags in the header.
I'm puzzled as to why it's not functioning, especially since it works fine on my desktop version. Included below is the code with some CSS and the HTML snippet. The end goal is mobile rendering, specifically focusing on Android and iPhone devices.
@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>