电子邮件基础valign =“中”不起作用

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;应用于表，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>