Align icon to text size - html

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>

Answer 2

I would use Flexbox and <span> instead of <p> to achieve this. With the Flexbox approach you can center all the items horizontally and vertically.
Why <span>? Because it is a generic inline container for phrasing content, which does not inherently represent anything.
.wrapper {
display: flex;
align-items: center;
font-family: 'Roboto', sans-serif;
font-size: 75px;
line-height: 1;
}
span {
margin: 0 0 0 .25em;
}
.em-image {
background-image: url(https://i.imgur.com/r8hkG1o.png);
height: 1em; /* Change this value to match the desired height */
width: 1em; /* Change this value to match the desired width */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
<div class="wrapper">
<i class="em-image"></i>
<span>Name</span>
</div>

Answer 3

Simply, Try to find the height of the text and make max height to the icon equal to the height of the text
you may try to add this CSS code:
[class^="em-"], [class*=" em-"], .em-png {
max-height: 200px;
}
if the icon is larger smaller than the text height try to increase or decrease the icon height
i hop this answer helps

Answer 4

My suggestion is to use inline-flex to the class .text (instead of inline-block)
then you can just give the icon a align-self: center and it should be what you are looking for. You will probably need to adjust the spacing but should be good.
.text {
display: inline-flex;
}
[class^="em-"] {
align-self: center;
}

Answer 5

I'd suggest several things:
Use "em", as you were doing. "rem" will take the root font-size, and will break the component if that changes, while "em" will keep the image size proportional to the label text.
Use flexbox. It's shorter, more clear and modern.
No font actually occupies the whole vertical space. There is some extra space above and bellow. The typography you are using, Roboto, occupies approximately 80% of the vertical space, so that should be reflected in your css if want to be really precise.
Optional: the font is also not exactly centered, it has slightly more space bellow than above, so you'll need to correct this, by a factor of 2%.
The final code would be:
.text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
display: flex;
align-items: center;
}
.em-image{
background-image: url(https://i.imgur.com/r8hkG1o.png);
}
[class^="em-"], [class*=" em-"], .em-png {
height: .8em;
width: .8em;
background-position: center;
background-size: contain;
margin-right: .25em;
margin-top: -.02em;
}
<p class="text"><i class="em-image"></i> Name</p>