2010-02-04 11:55 图片与文字垂直居中

转载自：http://hi.baidu.com/zln_ljl/item/466db84c46f6bfee1f19bc1a

图片与文字垂直居中

可用图片的属性: vertical-align:middle；或 vertical-align:length(值)
vertical-align
初始值：　baseline（缺省值）
可否继承：否
适用于：　内联元素（不能用在块状结构中）
说明：vertical-align:baseline使元素的基线同父元素的基线对齐．
警告：vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样．


一、如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片中添加CSS属性：vertical-align:middle;这样，它们在同一行就会垂直居中对齐了。

二、 在网页中，有时会需要在文字旁边加跟上一个图片。
在css默认情况里，是图片置顶对齐，文字置底对齐，文字和图片排列在一起就很难看;
在CSS2手册中，找到vertical-align的属性，可接受的参数值如下：
baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
baseline : 　将支持valign特性的对象的内容与基线对齐
sub : 　垂直对齐文本的下标
super : 　垂直对齐文本的上标
top : 　将支持valign特性的对象的内容与对象顶端对齐
text-top : 　将支持valign特性的对象的文本与对象顶端对齐
middle : 　将支持valign特性的对象的内容与对象中部对齐
bottom : 　将支持valign特性的对象的文本与对象底端对齐
text-bottom : 　将支持valign特性的对象的文本与对象顶端对齐
length : 　CSS2　由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位
为了布局更好看，我选择了text-bottom，让文字与图片在同一水平线上，效果好多了


我们使用text-bottom时,如果line-height没有超过文字高度当然是没有问题,如果line-height远远大于文字高度的话,就会出现图片偏下的效果,和原来图片偏上的效果没什么区别了,那我们该怎么解决这个问题呢?

length就要大显身手了,0即为居顶效果,那么我们只要设成负值,适当调整,就能得到我们想要的结果了!
div#logininfo img{
margin-right:3px;
vertical-align:-4px;
}

总结：对于单行图片文字垂直居中（有图片的情况下）
1.当没有高度行高时，我们只要简单的对内联元素应用vertical-align:middle;就可以了．此外对于一个图片和文字的高度相差无几的，不用这个样式也是可以的．
2.对于有行高或有行高＋高度的,FF可以正确显示,ie6失效．所以也只能对IE6以下版本使用KACK了！，现在IE7已经改正了这个错误．
3．对2补充一下，可以用不定高度，用上下补白的方法，这样就可以兼容IE6了。