Align icon to text size

Question

I'm trying to display an image in an icon next to a piece of text. It sits slightly below the text and I'd like it to at least be the same height as the text aka vertically aligned to the middle.

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 1em;
    width: 1em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

<p class="text"><i class="em-image"></i> Name</p>

It's currently looking like this Whereas I'd prefer it to look like this

Is there a way to at least make the image match the line height? The image sits at the bottom now but I'd like it the full height and aligned vertically to the text, I'm just not sure how to go about this, could the same be done with a span or a DIV containing the image as a background instead?

Answer 1

I Suggest that use vertical-align:baseline and use 'rem' instead 'em' that should work.

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 2rem;
    width: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: baseline;
}

<p class="text"><i class="em-image"></i> Name</p>