HTML 电子邮件中的文本垂直居中

Question

我正在尝试将 TD 中的某些文本垂直居中。我试过 valign: middle 行样式， vertical-align: middle 在头部的样式标签中。

我不明白为什么这不起作用，因为它似乎适用于我的桌面版本。下面是代码 w/some css 和 HTML 段。这将在移动设备上呈现，所以我的重点是 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>

Answer 1

所以...我想通了！您需要在容器而不是 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>

HTML 电子邮件中的文本垂直居中

Vertically center text in HTML email

css

email

html-email