How to Vertically Center Images on a Line?

Question

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

Answer 1

Why don't you set the image as background of the div element? I.e.:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

This will position the image on the top left. At least that's how I would do.

Regards

Answer 2

Try to make parents container display: table and display: table-cell. After that vertical-align: middle should work in "table way".

Answer 3

The cause of your problem is that the image is vertically centered relative to the x-height of the surrounding text. This can be seen quite clearly on an enlarged screenshot where the baseline and mean line of the surrounding text is included:

The image is aligned similarly no matter which font size or line height you use. So, in a typographical sense, the image is actually correctly vertically aligned. However, if you'd like to adjust the alignment so that the center of the image is closer to the mean line, simply move it a bit upwards using margin-bottom:

img.icon {
    margin-bottom: 0.25em;
}

The value of 0.25 em is rather arbitrarily chosen, based on what looked good when I tried it out. Adjust freely according to taste.

Here is a comparison before and after the margin-adjustment, with different font sizes.