Foundation-emails: [Button] Unable to align Button alignment to the middle and to the right

[matchatype]

Docs state that you can vertically align your content within columns by using valign attribute, but it doesn't work with buttons. Additionally, I'm not able to align buttons to the right.

Besides the normal flow, the only option to position a button is by using the center tag.

[cossssmin]

Yeah, the <button> was somehow forgotten. There's already a PR merged into Inky (https://github.com/zurb/inky/commit/11805b4d90987361f4e009cb26714e8c37d4f5ec), but the 2.2.2 Foundation for Emails release is pending, so you won't get it through an npm update or install.

Not sure what the plans are for the next release, but I hope it'll be soon, as there were many, very useful PRs merged over the past month or so.

[rafibomb]

The valign attribute goes on the container wrapping the content - like the column. You need 2.1+ to get this.

Working example:

<row>
    <columns small="6" large="3" valign="middle">
      <button href="#" class="align-right">Button</button>
    </columns>

CSS

table.button.align-right {
  display: inline-block;
  float: right;
}

[rafibomb]

2.2 is set to release 11/10. You can follow releases here: https://github.com/zurb/foundation-emails/wiki/Roadmap

Since https://github.com/zurb/inky/pull/61 is in that resolves the 2nd part of your question, we'll close this here.