title: Vertically center text in HTML email
body: <p>I'm trying to center vertically some text in a TD. I've tried <code>valign: middle</code> in line styled, <code>vertical-align: middle</code> in the style tags in the head. </p>
  
  <p>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. This will be rendered in mobile so my focus is Android and iPhone.</p>
  
  <pre><code> @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;}
  
  
  &lt;tr&gt;
    &lt;td&gt;
      &lt;table bgcolor="#ed1848" border="0" cellspacing="0" cellpadding="0" width="100%" height="121"&gt;
        &lt;tr&gt;
          &lt;td width="112" border="0" cellspacing="0" cellpadding="0" valign="middle" style="border-collapse:collapse;"&gt;&lt;img src="images/image.jpg"  width="112" height="121" alt="" style="display: block;width: 112px; height:auto;" border="0" &gt;&lt;/td&gt;
         &lt;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;"&gt;Thanks for &lt;br&gt;your interest.&lt;/td&gt;
  &lt;!--[if !mso 9]&gt;&lt;!--&gt;
         &lt;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"&gt;Thanks for your interest.&lt;/td&gt;
  &lt;!--&lt;![endif]--&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>