我的CSS心得(3) - 在文字前加上与文字居中的图标

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点,如下图)
 文字文字
虽然解决的办法有很多.比如.
  1. 用table来控制图片和文字居中对齐 (这样会因为一个小图片写多很多代码)
  2. 使用图片的Align属性 设置为align="absmiddle" (但是要知道,标准的W3C中定义的img标签是不支持Align属性的)

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

 文字文字



上一篇: 消失了几天.
下一篇: 其实,Firefox也不安全
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 10 | 引用: 0 | 查看次数: -
风云娱乐[2007-01-20 04:24 PM | | | 121.12.23.79 | del | 回复回复]
先设置一个 Css :
.Blog_Img {vertical-align:middle}

图片调用的时候可以这样
<img class="Blog_Img" src="http://www.pjhome.net/skins/OURB2C/UBB/Icons/smiley.gif"> 这个效果!
幸福的子弹[2005-11-07 03:54 PM | | | 218.13.99.44 | del | 回复回复]
引用来自 Loveyuki 引用来自 Loveyuki
呵呵,我一般使用 vertical-align: middle; 来控制!


都试用了一下,发现还是LOVEYUKI方面一些,不用去管图片大小。
流浪的脚[2005-10-21 07:30 PM | | | 221.226.180.161 | del | 回复回复]
HOHO,挺好使的.
Loveyuki[2005-07-07 11:37 PM | | | 59.40.100.93 | del | 回复回复]
呵呵,我一般使用 vertical-align: middle; 来控制!
bohemia[2005-04-22 10:30 PM | | | 218.25.161.3 | del | 回复回复]
这个方法挺管用的~~呵呵
puterjam[2005-03-23 03:17 PM | | | 219.159.140.84 | del | 回复回复]
引用内容 引用内容
最初由 iuy 发表于 2005-03-23 02:32 PM:
老大,请问一下,div标签中的文字不自动换行,应该怎么解决阿,我很菜...

你可以试一下,word-break 和 word-wrap
注意这个是IE特有属性

示例:
div {
  word-wrap : break-word ;
  word-break : normal ;
}
iuy[2005-03-23 02:32 PM | | | 222.174.176.87 | del | 回复回复]
老大,请问一下,div标签中的文字不自动换行,应该怎么解决阿,我很菜的,谢谢老大了
viekee[2005-03-23 01:36 PM | | | 222.50.90.43 | del | 回复回复]
了解
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱:
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭