Does valign="middle" work at all?

[flyingL123]

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?

That screenshot is not from an email client. It's just the browser preview of the message. Using Chrome on Mac.

[flyingL123]

I think it's being caused by the padding here:

https://github.com/zurb/foundation-emails/blob/develop/scss/grid/_grid.scss#L69

[lspoor]

I think it's being caused by the padding here:

https://github.com/zurb/foundation-emails/blob/develop/scss/grid/_grid.scss#L69

Without editing the core framework files, that value can be changed in the _settings.scss file.

https://github.com/zurb/foundation-emails/blob/develop/scss/settings/_settings.scss#L45

And as mentioned, this will be issue for you. By default Foundation for Emails columns have padding padding on them with a value of 16px.

[flyingL123]

But shouldn’t that padding be set to be equal top and bottom when something is supposed to be aligned in the middle? I’m just confused why the framework even offers a valign=middle option if it doesn’t actually place the content in the middle.

[flyingL123]

Like I said even the example in the docs doesn’t look to be working correctly.

[lspoor]

But shouldn’t that padding be set to be equal top and bottom when something is supposed to be aligned in the middle? I’m just confused why the framework even offers a valign=middle option if it doesn’t actually place the content in the middle.

Not necessarily. I find it easier to set the $column-padding-bottom to 0 and simply use spacers between rows.

You also need to take into account typography has margin bottom set on it: https://github.com/zurb/foundation-emails/blob/develop/scss/settings/_settings.scss#L72-L73

Also if you inspect the code used within example, 'Headline' and 'Subheadline' have the margin bottom set to 0 which aligns centrally with the 250x250 image perfectly. But as per the second image I've attached the 'Bottom' text isn't aligned to the bottom of the 250x250 image because it still has the margin bottom set. Hopefully this clears things up for you.

[joeworkman]

This issue has been mentioned on Foundation Open Source Community. There might be relevant details there:

https://foundation.discourse.group/t/foundation-emails-vertical-alignment-not-working/3139/3