Html 垂直对齐文本/2列部分中的按钮

我试图垂直对齐一些文本和一个带有2列部分的按钮。为了澄清我的目标是让文本/按钮与图像的垂直中间对齐

我已尝试将

vertical align=“middle”

标记添加到

mj列中，但这似乎没有任何效果。但是，与底部对齐确实有效

下面是我的代码示例和指向mjml编辑器的链接，其中示例演示了该问题

<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>


想要一只小猫吗？你当然知道！谁不想有个毛茸茸的小伙伴陪你？继续点击按钮，你知道你想要。
养只小猫

链接：

编辑：非常感谢@curveball应用的解决方案如下：

<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>


想要一只小猫吗？你当然知道！谁不想有个毛茸茸的小伙伴陪你？继续点击按钮，你知道你想要。
养只小猫

链接：
如果我的想法正确，请将
vertical align=“middle”
放在两个
mj列上。
如果我的想法正确，请将
vertical align=“middle”
放在两个
mj列上。
如@curveball所述，您可以通过添加垂直对齐来实现这一点=两列上都是“中间”。
根据@curveball的说明，您可以通过在两列上添加垂直对齐=“middle”来实现这一点。
您最好的选择是添加如下所示的填充。我已经尝试过，它看起来非常符合您的需要

<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>


想要一只小猫吗？你当然想要！谁不想要一个毛茸茸的小伙伴陪你呢？点击按钮，你知道你想要的。
养只小猫

让我知道这是否有帮助。
你最好的办法是像下面这样添加填充物。我已经试过了，它看起来非常符合你的需要

<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>


想要一只小猫吗？你当然想要！谁不想要一个毛茸茸的小伙伴陪你呢？点击按钮，你知道你想要的。
养只小猫

让我知道这是否有帮助。
回答正确。而且，垂直对齐属性在HTML中的行为不可预测。我不相信它在所有电子邮件客户端中都是一致的。MJML会将您告诉它的内容传递给HTML，但会彻底测试！回答正确。而且，垂直对齐属性在HTML中的行为不可预测。我不相信它是一致的在所有电子邮件客户端中保持一致。MJML会将您告诉它的内容传递到HTML，但要彻底测试！