margin-bottom解决图片文字不对齐的问题

2010年02月25日

     我们在做网页的时候,会遇到一个图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点),如下图,“我的联系方式”是文字,后面的email是图片:

文字和图片没有对齐

 

解决问题最好的办法:

     一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来,做法是把这个值设置为负数。例如我们高度为22像素的图片设置它的style="margin-bottom: -4px" 这样文字和图片就居中了。这个值随着图片的大小不同而改变,具体的大家测试一下就知道了。下面是我更改后的效果:

文字和图片对齐了

 

本文转载自: DIV+CSS解决图片文字对齐的问题
版权归原作者所有!

露兜博客博主,计算机科学与技术专业本科在读,男生,儒家思想受益者。文采不佳,不喜欢聚光灯,不喜欢吹牛,不喜欢无序的做事方式。闲时喜欢写些代码自娱自乐,并在博客中分享一些个人技术经验。

点击支持作者 0
标签: , ,
Advertising
  1. 2010年3月15日 10:42 | #1

    不客气!

    [回复]

  2. 2010年2月28日 16:02 | #2

    解决咯、谢谢1

    [回复]