MJML

Question

我很难弄清楚如何将带有图标的文本行垂直居中，它应该看起来像这样

我的第一次尝试是嵌套在 mj-text

中

<mj-section background-color="#fff" padding="45px 0">
    <mj-hero>
        <mj-text align="center">
          Find your next <span class="neon-red">Meetup</span> <img style="width: 12px" src="img/chevron--right.png" />
        </mj-text>
    </mj-hero>
</mj-section>

这不会垂直对齐文本和图标

我也试过制作表格，但没有任何改进。

Answer 1

我发现这是一个简单的 css 错误。我需要垂直对齐图像，仅此而已 ‍♂️

<mj-section background-color="#fff" padding="45px 0">
    <mj-hero>
        <mj-text align="center">
          Find your next <span class="neon-red">Meetup</span> <img style="width: 12px; vertical-align: middle" src="img/chevron--right.png" />
        </mj-text>
    </mj-hero>
</mj-section>

MJML - 用图标居中一行文本

MJML - Centering a line of text with an icon

center

vertical-alignment