Foundation for Email valign=“middle” not working

问题

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