Vertical center image in div differences in Safari and FireFox

Question

I currently am comparing this in Safari and Firefox. A small image inside a div, which I need to center vertically.

Here is a simple test case that I have distilled down: http://dl.getdropbox.com/u/340087/Drops/09.23.09/so-03f73322-164033.html

This one is probably even more simple: http://dl.getdropbox.com/u/340087/drops/09.23.09/align-42fc19f2-154007.html

1) Why do I need a space after the image in order to get any align css to work?

2) What can I do to get Safari to perfectly center, it is 1-2px too low, essentially lining up the top of the image with the text.

Thanks

Answer 1

Try the universal selector:

div * { vertical-align: middle }

or go old school (if you can) and use tables?

There's always a difference of few pixels in Safari (Mac) and browsers because of the way safari renders text. Read about it here.

Answer 2

Images are considered inline elements, so they're basically treated as text.

If you want exact positioning across browsers, the safest way is to use the image for a background, rather than an inline img element.

Answer 3

Enclose the text in a span, and apply vertical-align to that as well.

HTML snippet:

<div class="right">
    <img src="action_check.png" width="16" height="16" class="status" alt="Data Ok" />
    <span>Chose a User Name</span>
</div>

CSS addition:

span { vertical-align: middle; }

Tested in recent versions of FF, IE, Safari, Chrome and Opera (Windows).