在 2 列部分中垂直对齐 text/button
vertical align text/button in 2 column section
我正在尝试将一些文本和一个按钮与 2 列部分垂直对齐。澄清一下,我的目标是让 text/button 与图像的垂直中间对齐。
我试过将 vertical-align="middle"
标签添加到 mj-column
中,但这似乎没有任何效果。但是,对齐到底部确实有效。
下面是我的代码示例和 link 到 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>
Link: 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>
如果我的想法正确,请将 vertical-align="middle"
放在 both mj-column
s.
根据@curveball 提到的,您可以通过在两列上添加 vertical-align="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>
我正在尝试将一些文本和一个按钮与 2 列部分垂直对齐。澄清一下,我的目标是让 text/button 与图像的垂直中间对齐。
我试过将 vertical-align="middle"
标签添加到 mj-column
中,但这似乎没有任何效果。但是,对齐到底部确实有效。
下面是我的代码示例和 link 到 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>
Link: 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>
如果我的想法正确,请将 vertical-align="middle"
放在 both mj-column
s.
根据@curveball 提到的,您可以通过在两列上添加 vertical-align="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>