电子邮件基础valign ="middle"不工作 [英] Foundation for Email valign="middle" not working

问题描述

我正在使用全新的Foundation for Email，并进行了以下测试:

I'm using a fresh installation of Foundation for Email, and have the following test set up:

<container>

  <wrapper>
    <row>
      <columns large="5" valign="middle">
        <img src="https://placehold.it/690x173" alt="Company Logo">
      </columns>
      <columns large="7" valign="middle">
        <h4 style="margin-bottom: 0;" class="text-right small-text-center">Thanks for your order!</h1>
      </columns>
    </row>
  </wrapper>

</container>

我希望徽标和标题在其容器中垂直居中.但是，如您在屏幕截图中所见，底部有额外的空白:

I expected the logo and the title to be vertically centered in their container. However, as you can see in the screenshot, there is extra white space at the bottom:

即使文档中的示例似乎也是工作不正确.这些项目在其容器的中心未垂直对齐.

Even the example in the documentation seems to be working incorrectly. The items are not vertically aligned in the center of their container.

我在这里想念什么?为什么valign属性没有文档说明的功能?

What am I missing here? Why doesn't the valign attribute function as the documentation suggests?

推荐答案

我尚未测试此修补程序在不同设备/平台上的运行情况，但是您可以将以下内容应用于列以删除行中的多余空间

I've not tested how well this fix will work in different devices/platforms however you can apply the below to your columns to remove the extra space in your row.

  <wrapper>
      <row style="border: 1px solid black;">
        <columns large="5" valign="middle" style="padding-bottom: 0;">
          <img src="https://placehold.it/690x173" alt="Company Logo">
        </columns>
        <columns large="7" valign="middle" style="padding-bottom: 0;">
          <h4 style="margin: 0" class="text-right small-text-center">Thanks for your order!</h1>
        </columns>
      </row>
    </wrapper>

这篇关于电子邮件基础valign ="middle"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！