Vertical Align image inside <mj-column>

[jaypeedevlin]

I'm trying to vertically align an image inside an <mj-column> tag, but can't seem to find away. The vertical-align parameter seems to do nothing so must not affect the content within it.

My feeling is that this is not supported, are you able to confirm if this is correct?

Simplified code that I have so far

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column width="25%" vertical-align="middle">
          <mj-image align="center" src="http://placehold.it/100" />
        </mj-column>
        <mj-column width="75%">
          <mj-text>
          <h4>I want the image on the left to be vertically centered</h4>
          <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. 
          </p>
          <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. 
          </p>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

and how this renders:

[ngarnier]

Hey @jaypeedevlin, thanks for reporting the issue! There's definitely an issue with vertical-align here, we'll investigate. Interestingly, it does work if set to top or bottom, and it works if vertical-align is set to middle on both columns (live example):

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column width="25%" vertical-align="middle">
          <mj-image align="center" src="http://placehold.it/100"  />
        </mj-column>
        <mj-column width="75%" vertical-align="middle">
          <mj-text>
          <h4>I want the image on the left to be vertically centered</h4>
          <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. 
          </p>
          <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. 
          </p>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Maybe this workaround can help in the meantime we solve the issue?

[iRyusa]

Hi @jaypeedevlin

Well vertical-align behave weirdly, I think this is most likely a CSS issue rather than a thing related to MJML. There's multiple codepen to show some inconsistent behaviour with vertical-align ex: https://codepen.io/edge0703/pen/iHJuA

[iRyusa]

Well @ngarnier solution looks to fix the issue for you ! Feel free to reopen if not !

[in-in]

@ngarnier Thanks!
Maybe add some notice about this issue in the documentation?
I can’t find a way to contribute to documentation and English not my native language but maybe something like this:

vertical-align=’middle’ works properly only if adjacent mj-column also set middle attributes

[sidhantsuvagiya]

Just give both columns to vertical-align="middle" and it will work

like this

<mjml> <mj-body> <mj-container> <mj-section> <mj-column width="25%" **vertical-align="middle"**> <mj-image align="center" src="http://placehold.it/100" /> </mj-column> <mj-column width="75%" **vertical-align="middle"**> <mj-text> <h4>I want the image on the left to be vertically centered</h4> <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. </p> <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. </p> </mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml>