电子邮件基础：垂直对齐在移动设备上不起作用

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进行硬编码，但即使这样也不起作用：两个子组件仍然停留在顶部。

我还尝试对行和列的垂直对齐方式进行硬编码，但似乎无法破解代码。任何帮助将由衷地感谢。

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>