why do <li> images vertically align to the top

[TomJones]

I've done all the simple manipulations that I can think of but (for what is probably a logical reason) I cannot get my list item images in my unordered lists to vertically align in the center. Squares, circles, and disks (bullets, basically) all find their way to central alignment automatically but, every self-created image I use aligns to the top of the line.

Anybody ever dealt with this?

[isitreal]

That's a hard one to fix, it looks like if the image is much different in height than the font size of the list item, you're going to get that behavior, so I guess the real solution is to only use images that more or less fit the font size of the line, using lineheight didn't seem to solve the problem, although you could probably get that to work by adding padding top or bottom to the image canvas.

For example, a font size of say 13 px seems to line up evenly with an image of 13 pixels height.

[TomJones]

I was thinking along those lines (seems kinda buggy that defualt bullets center but specified images align top). Next question if I use EM and %s, I guess I would make my image 12px in size for my 100%/1 EM font size. Wonder what will happen when I adjust text sizing in IE.

This will be easy enuogh to test. I'm going to keep the image the same size but, put it on a transparent canvas.

[TomJones]

Well, not all together too bad. I ended up using a canvas size of 14 px and, for reasons beyond my comprehension, I had to position my 8px image at the very bottom of the canvas. When I did this, it was centered.

Seemed to hold up fine when adjusting IE text size to largest and smallest so, there you go.

[isitreal]

I'm seeing the images align to the bottom, not the top, of the line in all browsers, by the way, so at least the way this is treated is consistent.