0

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

我尝试将vertical-align="middle"标签添加到，mj-column但这似乎没有任何效果。但是，与底部对齐确实有效。

下面是我的代码示例和 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>

链接：https ://mjml.io/try-it-live/SkblMhXV8

编辑：非常感谢@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>

链接：https ://mjml.io/try-it-live/HJ1v0NSVI

4

3 回答 3

3

如果我的想法正确，请穿上vertical-align="middle"两个s mj-column。

于 2020-02-26T12:40:03.883 回答
0

根据@curveball 的提及，您可以通过在两列上添加 vertical-align="middle" 来实现这一点。

于 2020-02-26T12:48:58.507 回答
0

您最好的选择是添加如下填充。我已经尝试过了，它看起来几乎是你需要的。

<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>
于 2020-02-27T07:39:45.760 回答