您现在的位置: 雨哲在线 >> 文章教程 >> Web开发 >> HtmlCss >> 查看文章内容

在文字前加上与文字居中的图标

【字体: 】       ★★★ 作者:佚名    文章来源:pjhome.net    点击数:1255    更新时间:2007-05-29    阅读点数:0

载入中

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点,如下图)
 

第 1 幅 ( 点击查看原图 )
在文字前加上与文字居中的图标
文字文字
虽然解决的办法有很多.比如.
  1. 用table来控制图片和文字居中对齐 (这样会因为一个小图片写多很多代码)
  2. 使用图片的Align属性 设置为align="absmiddle" (但是要知道,标准的W3C中定义的img标签是不支持Align属性的)

以上的方法都不是解决问题最好的办法.后来我无意中发现可以用CSS来解决这个问题.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

 

第 2 幅 ( 点击查看原图 )
在文字前加上与文字居中的图标
文字文字

 

原文:http://www.pjhome.net/article.asp?id=275

文章来源:YUZHE.NAME

网友看法
    数据载入中,请稍后……
    发表评论
    昵 称: 邮 箱:
    评 分:
    内 容:
    0/5000)
    插入链接
    验证码:

    雨哲提示:Alt+S快速发表
广告位招商QQ:425162221