Column with vertical-align:middle only works if highest column has va:middle

[YasiOnFire]

Describe the bug Vertical-align: middle on a column, only works if the tallest column in a row, also has vertical-align set to middle.

To Reproduce Steps to reproduce the behavior:

1. Rnder this code:

   <mjml>
   <mj-body>
   <mj-section>
     <mj-column vertical-align="bottom">
       <mj-text>
         Lorem
       </mj-text>
     </mj-column>
     <mj-column vertical-align="middle">
       <mj-text>
         lorem<br>ipsum
       </mj-text>
     </mj-column>
     <mj-column vertical-align="top">
       <mj-text>
         Lorem ipsum dolor sit amet
       </mj-text>
     </mj-column>
     <mj-column vertical-align="top">
       <mj-text>
         lorem<br>ipsum<br>dolor<br>sit<br>amet<br>consecteur
       </mj-text>
     </mj-column>
   </mj-section>
   </mj-body>
   </mjml>

2. The second column has vertical-align set to middle. This will not work unless the last column (which is the tallest) also has vertical-align set to middle.

Expected behavior Column with vertical-align:middle to be vertically centered no matter what the tallest column va setting is.

MJML environment (please complete the following information):

• OS: Windows 10
• MJML Version 4.5.1
• MJML tool used: online playgorund, VS Code extension, MJML node API

Screenshots

[iRyusa]

Well that's not really related to MJML because it's actually how vertical align works in CSS.

[YasiOnFire]

Are you sure about this? I've made some examples: https://jsfiddle.net/Yasio/pns4tbxh/12/

[iRyusa]

Those examples aren't really related to MJML usage of vertical align. vertical align must be set on all column to be effective within this setup (and mostly middle doesn't work properly if set on only one column but bottom & top works fine).

There's multiple article that describe how vertical-align works, and it's one of the most ambiguous css attribute as it works "relative" to other nodes.

[YasiOnFire]

Ok, I understand. Thank You. I've made a "not so elegant" "fix" that works in my case. If any one stumbles upon this, try adding this style

<mj-head>
    <mj-style>
      @media screen and (min-width:480px) {
        .vam-fix [class^="mj-column-"] {
          display: table-cell !important;
        }
      }
    </mj-style>
  </mj-head>

and then add css-class="vam-fix" on a section with vartical-allign middle on one element.

[iRyusa]

That could have some major issues on some email clients so I wouldn't advise it.