电子邮件基础：Vertical-Align 不适用于移动设备

Question

我正在尝试垂直对齐图片旁边的标题和署名。元文本应出现在图像高度的中间。它在桌面上运行良好，但移动设备拒绝运行。我曾尝试将 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，但即使那样也不起作用：两个 child 组件仍然粘在顶部。

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

Answer 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>

电子邮件基础：Vertical-Align 不适用于移动设备

Foundation for Email: Vertical-Align Not Working on Mobile

html

css

email

sass

zurb-foundation