How to Vertically Center Icons on a Line?

Posted by jeremy on Stack Overflow See other posts from Stack Overflow or by jeremy
Published on 2010-06-15T18:18:35Z Indexed on 2010/06/15 18:22 UTC
Read the original article Hit count: 164

Filed under:
|
|
|

What's the best way to center icons on a line when the icons 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>

I want the img to be centered on a single line of the div, above. 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

© Stack Overflow or respective owner

Related posts about html

Related posts about css