When I try to vertical-align: middle
an icon (<img>
) next to some text, the icon is always a little bit too low (see example). How can I fix this so it is vertically centered with the text.
Example:
p {
font: 10pt Arial, sans-serif;
}
.icon {
vertical-align: middle;
}
<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>