How to Vertically Center Images on a Line?
- by jeremy
What's the best way to center icons on a line when the images are smaller than the line height?
For example (styles inline for easier reading):
<div style="line-height: 20px">
<img style="width: 12px; height: 12px;"/>
Blah blah blah
</div>
Here's a jsFiddle example. This example also shows why vertical-align: middle does not work.
I want the img to be centered against the text of the div. That is, even if the text wrapped to multiple lines, the image would be centered against a single line. Ideally, the solution would not involve setting margings/paddings on the image and would work even if I didn't know the line-height.
Things I've read:
How do I vertically align text next to an image with CSS? (deals with case where image is larger, doesn't seem to apply here)
Understanding vertical-align
