I am trying to vertically align some text and a button with a 2 column section. To clarify my goal is to have the text/button to align with the vertical middle of the image to it's right.
I have tried adding the vertical-align="middle" tag to the mj-column but this does not seem to have any effect. However, aligning to the bottom does work.
Below is a sample of my code and a link to the mjml editor with a sample demonstrating the issue.
<mjml>
<mj-body>
<mj-section>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-column width="50%">
<mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
<mj-button href="https://www.google.com">Get a Kitten</mj-button>
</mj-column>
<mj-divider border-color="#F45E43"></mj-divider>
</mj-section>
</mj-body>
</mjml>
Link: https://mjml.io/try-it-live/SkblMhXV8
EDIT: Many thanks to @curveball the applied solution is as below:
<mjml>
<mj-body>
<mj-section>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-column width="50%" vertical-align="middle">
<mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
<mj-button href="https://www.google.com">Get a Kitten</mj-button>
</mj-column>
<mj-divider border-color="#F45E43"></mj-divider>
</mj-section>
</mj-body>
</mjml>
If I got the idea correctly, put vertical-align="middle" on both mj-columns.