开发者

aligning images with text

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


  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>


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜