Clever Geek Handbook

Vertical center image in div differences in Safari and FireFox

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

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

It's probably even easier: http://dl.getdropbox.com/u/340087/drops/09.23.09/align-42fc19f2-154007.html

1) Why do I need space after the image to make any css CSS work?

2) What can I do to get Safari to be perfectly centered, that's 1-2px too low, essentially aligning the top of the image with the text.

thank

+2


source to share


3 answers


Images are considered inline elements, so they are mostly treated as text.



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

+2


source


Paste the text into the range and apply vertical alignment to it.

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>


Adding CSS:

span { vertical-align: middle; }

Tested on the latest versions of FF, IE, Safari, Chrome and Opera (Windows).

+2


source


Try a universal selector:

div * { vertical-align: middle }

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

In Safari (Mac) and browsers, there is always a few pixels difference due to the way safari displays the text. Read about it here .

0


source






More articles:


All Articles