Lining up an image with text

I’m working on an app where I want to line up a flag with a line of text. Here is a bit of my template code:

<p>{{ number }} - Call is originating from the {{ c }} <img src={{ url }} /></p>

When it renders, it looks a bit like this:

How can I get this flag to line up with the “US” text?

Is it possible to provide a bit more code, like the surrounding wrapped elements or styles associated with the <p> tag or the <img> tag because I just tried the snippet you gave in a CodePen, and by itself it looks alright:

Edit: a full width screenshot might also help to get sense of the page’s margin and size.

1 Like

You might try vertical aligning the image i.e. style=‘vertical-align:middle’ to see if that is enough

1 Like

Try using css flexbox:

display: flex;
align-items: center;
justify-content: center;

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.