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

问题描述

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

  <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，但即使这样也没有用：两个子组件仍然粘在顶部。

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

标签： htmlcssemailsasszurb-foundation

解决方案，感谢@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>

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

问题描述

解决方案

推荐阅读