vertical align text/button in 2 column section

Question

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>

Link: https://mjml.io/try-it-live/HJ1v0NSVI

score 5 · Accepted Answer · answered Feb 26 '20 at 12:40

5

If I got the idea correctly, put vertical-align="middle" on both mj-columns.

answered Feb 26 '20 at 12:40

curveball

4,320
15
39
49

Correct answer. And, the vertical-align attribute behaves unpredictably in HTML. I wouldn't trust it to be consistent among all email clients. MJML will pass to HTML what you tell it to, but test thoroughly! – BaldEagle Oct 19 '20 at 21:14

score 0 · Answer 2 · answered Feb 26 '20 at 12:48

0

As per the @curveball mention you can achieve this by adding vertical-align="middle" on both columns.

answered Feb 26 '20 at 12:48

Jamshaid

44
5

score 0 · Answer 3 · edited Oct 29 '21 at 07:53

Your best bet is to add padding like below. I have tried it and it looks pretty much what you need.

<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" padding="12% 0">
        <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>

vertical align text/button in 2 column section

3 Answers3