今天又在群中看到
![](/icons/98698yi.gif)
些朋友问单行图片文字垂直居中问题了
![](/icons/98698dou.gif)
于是写了这篇文章.
这个问题是在做页面中经常会遇到
![](/icons/98698de.gif)
问题
![](/icons/98698dou.gif)
首行我们先看
![](/icons/98698yi.gif)
下最基础
![](/icons/98698de.gif)
![](/icons/98698de.gif)
吧!
以下选自(CSS权威指南)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416080016521.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]vertical-align
![](/icons/98698chushi.gif)
值: baseline(缺省值)
可否继承:否
适用于: 内联元素
介绍说明:vertical-align:baseline使元素
![](/icons/98698de.gif)
基线同父元素
![](/icons/98698de.gif)
基线对齐.
警告:vertical-align不能影响表格单元中
![](/icons/98698de.gif)
内容
![](/icons/98698de.gif)
对齐
![](/icons/98698dou.gif)
对于块元素中
![](/icons/98698de.gif)
内容也
![](/icons/98698yi.gif)
样.
文字不多
![](/icons/98698dou.gif)
但时常有人范
![](/icons/98698cuowu.gif)
![](/icons/98698dou.gif)
有人说我用了为什么没有效果呢?首行看
![](/icons/98698yi.gif)
下他
![](/icons/98698de.gif)
代码.
![](\"http://www./Files/BeyondPic/2007-5/24/0752416080016521.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com].style{vertical-align:middle;.....}
HTML:<div
![](/icons/98698class.gif)
=\"style\"><imgsrc=\"地址\"/>...<div>
分析:从上面
![](/icons/98698de.gif)
代码可以看出
![](/icons/98698cuowu.gif)
就是把样式应用在块元素中了
我们只需要改样式为
![](\"http://www./Files/BeyondPic/2007-5/24/0752416080016521.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com].styleimg{vertical-align:middle;.....}
如果STYLE中有其它如INPUT或其它内联元素可写成
![](\"http://www./Files/BeyondPic/2007-5/24/0752416080016521.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com].styleimg,.style.input{vertical-align:middle;.....}
或.style*{vertical-align:middle;.....}/*在不影响其它元素
![](/icons/98698de.gif)
情况下使用这个通配符*/
以上是在没有设置高度/行高
![](/icons/98698de.gif)
事情下
![](/icons/98698dou.gif)
如果加入了高度和行高
![](/icons/98698de.gif)
事情下FF可以支持
![](/icons/98698dou.gif)
IE6以下则不完全支持
![](/icons/98698dou.gif)
看以下测试结果.(为了增加明显
![](/icons/98698de.gif)
效果对图片适当增加了高度)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416080046909.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run
[www.52css.com] =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
整理总结:对于单行图片文字垂直居中(有图片
情况下) 1.当没有高度行高时
![](/icons/98698dou.gif)
我们只要简单
![](/icons/98698de.gif)
对内联元素应用vertical-align:middle;就可以了.此外对于
![](/icons/98698yi.gif)
个图片和文字
![](/icons/98698de.gif)
高度相差无几
![](/icons/98698de.gif)
![](/icons/98698dou.gif)
不用这个样式也是可以
![](/icons/98698de.gif)
.
2.对于有行高或有行高+高度
![](/icons/98698de.gif)
,FF可以正确显示,ie6失效.所以也只能对IE6以下版本使用KACK了!
![](/icons/98698dou.gif)
现在IE7已经改正了这个
![](/icons/98698cuowu.gif)
.
3.对2补充
![](/icons/98698yi.gif)
下
![](/icons/98698dou.gif)
可以用不定高度
![](/icons/98698dou.gif)
用上下补白
![](/icons/98698de.gif)
思路方法
![](/icons/98698dou.gif)
这样就可以兼容IE6了