藏经阁

佛说:前世的五百次回眸才能换得今生的一次擦肩而过, 那么,我要用多少次回眸才能真正住进你的心中?(——席慕蓉)

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

小图片与文字在一起时往往不对齐。图片偏上。我一般解决方法是:margin-bottom:-3px;这里-3px要根据图片与大小确定,一般这个值可以实现16px~20px大小图片与12px~14px大小文字的对齐。

校内状态更新的方块表情与文字对齐很好,好奇其实现方式,用小bug(firebug)一看,发现使用的是vertical-align:text-bottom;我曾经测过和用过vertical-align:middle,效果不是很好,只要是兼容性不佳,于是舍弃。但是对于vertical-align:text-bottom没有试过与见过,于是简单测试了下!

<title>图片文字对齐</title>
<style type="text/css">
body{font-size:84%;}
.img{vertical-align:text-bottom;}
</style>

<body>
文字与小图片的对齐 <img class="img" alt="难过" src="image/face.gif" />
</body>

结果:

Firefox

ie

貌似不错。但是只是12px大小文字效果不错。一旦大于14px,效果有待商榷了!

 

http://hi.baidu.com/iamzhangxinxu/blog/item/7d597f8652141423c65cc39d.html

posted on 2009-07-01 12:27  小手冰凉  阅读(833)  评论(0编辑  收藏  举报