电子邮件基础：垂直对齐不适用于移动设备答案

【问题标题】：Foundation for Email: Vertical-Align Not Working on Mobile电子邮件基础：垂直对齐不适用于移动设备
【发布时间】：2020-03-21 07:50:17
【问题描述】：

我正在尝试垂直对齐图片旁边的标题和署名。元文本应该出现在图像高度的中间。它在桌面上运行良好，但移动设备拒绝工作。我尝试将 valign 用作mentioned here，但没有成功。它将文本撞到移动设备上的另一行。

  <row>
    <columns large="1" small="1" class="no-padding"></columns>
    <columns large="7" small="10" class="no-padding little-story">
      <row>
          <columns small="6" large="7">
            <img class="small-float-left" src="https://placehold.it/232x181?text=image" alt="" mc:edit="little_img_three">
          </columns>
          <columns small="6" large="5" class="meta">
            <h6 class="hed" mc:edit="hed_three"><a href="#">Headline</a></h6>
            <div class="subhed" mc:edit="subhed_three">by Person Person</div>
          </columns>
      </row>
      <p mc:edit="little_story_three">Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy</p>
    </columns>
    <columns large="1" small="1" class="no-padding"></columns>
  </row>

.little-story {
  .meta {
    vertical-align: middle;
    .hed {
      margin-bottom: 3px;
      margin-left: 15px;
      text-align: center;
    }
    .hed a {
      font-family: $sans-serif-fonts;
    }
    .subhed {
      color: #222;
      margin-left: 15px;
      text-align: center;
    }
  }
}

这是它在桌面上的样子：

这是它在移动设备上的样子：

我尝试在 .meta 容器上硬编码 min-height/height/max-height，但即使这样也不起作用：两个子组件仍然粘在顶部。

我还尝试对行和列上的垂直对齐进行硬编码，但似乎无法破解代码。任何帮助将不胜感激。

【问题讨论】：

试试.meta { margin-top: auto; margin-bottom: auto; } ?
您使用的是哪个移动电子邮件客户端？
另外，您是否尝试过将vertical-align 作为内联标签？我知道很多电子邮件客户只看内联标签（或至少习惯于）。
啊，你试过valign="middle"的内联标签吗？
实际上，我认为valign 对于 Gmail 来说是必不可少的，因为我在某处读到过。也许为其他敏感的电子邮件客户端保留一些其他内联vertical-align 样式：P。但是，不客气

标签： html css email sass zurb-foundation

【解决方案1】：

解决办法，感谢@EGC：

  <row>
     <columns large="1" small="1" class="no-padding"></columns>
     <columns large="7" small="10" class="no-padding little-story">
       <row>
           <columns small="6" large="7" valign="middle">
             <img class="small-float-left" src="https://placehold.it/232x181?text=image" alt="" mc:edit="little_img_three">
           </columns>
           <columns small="6" large="5" class="meta">
             <h6 class="hed" mc:edit="hed_three"><a href="#">Headline</a></h6>
             <div class="subhed" mc:edit="subhed_three">by Person Person</div>
           </columns>
       </row>
       <p mc:edit="little_story_three">Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy</p>
     </columns>
     <columns large="1" small="1" class="no-padding"></columns>
   </row>

【讨论】：