小编Ant*_*ony的帖子

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>
Run Code Online (Sandbox Code Playgroud)

链接: 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%" …
Run Code Online (Sandbox Code Playgroud)

html css email mjml

2
推荐指数
1
解决办法
2823
查看次数

标签 统计

css ×1

email ×1

html ×1

mjml ×1