aligning images with text

Question

Hi, i want to center align an image of 18px height with text next to it. Here is the code i use:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?

Thanks

Answer 1

Maybe you have a border somewhere in there you need to get rid of or set to zero width?

Answer 2

i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

this will shift the image up by 2px from where it originally was.

Answer 3

1. Don't forget to reset styles (margin/padding) : div, img, span { margin:0; padding:0; border:0 }
2. For vertical-align to work, your elements must me inline.
3. A classic choice to align text vertically is to give a line-height equal to container.

For example :

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>