html - 电子邮件 : Vertical-Align Not Working on Mobile 的基础

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>