Foundation for Email valign=“middle” not working

拥有回忆 提交于 2020-05-28 08:06:17

问题


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.

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


回答1:


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>


来源:https://stackoverflow.com/questions/47082604/foundation-for-email-valign-middle-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!