Lining up an image with text

[RiversideRocks]

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?

[khalby786]

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.

[tleylan]

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

[_tr]

Try using css flexbox:

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