电子邮件 valign="middle" 的基础不起作用

Question

我正在使用全新安装的 Foundation for Email，并设置了以下测试：

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

我希望徽标和标题在其容器中垂直居中。但是，正如您在屏幕截图中看到的那样，底部有额外的空白：

即使example in the documentation 似乎也无法正常工作。这些项目未在其容器的中心垂直对齐。

我在这里缺少什么？为什么 valign 属性没有像文档建议的那样起作用？

Answer 1

_normalize.scss 文件将vertical-align: top; 应用于 table、tr、td 和 th 标签。这会与垂直对齐方式混淆。

因此，您还需要将vertical-align: middle; 添加到标签中：

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

内边距和边距也会显着影响视觉最终结果，但这实际上是与表格单元格内内容的垂直对齐不同的问题。

Answer 2

我尚未测试此修复程序在不同设备/平台上的效果如何，但是您可以将以下内容应用于列以删除行中的额外空间。

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