0

I'm having a hard time figuring out how to vertically center a line of text with an icon, which is supposed to look like this

enter image description here

My first attempt is by nesting inside of 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>

This doesn't vertically align texts and the icon enter image description here

I've also tried making tables, but no improvements were made.

Joseph K.
  • 1,055
  • 3
  • 23
  • 46

1 Answers1

4

I found out that it was a simple css error. I needed to vertically-align the image, that was all ‍♂️

<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>
Joseph K.
  • 1,055
  • 3
  • 23
  • 46