图片和文字的对齐

最近工作中遇到些关于“图片和文字的对齐”的问题：

 

1.文字和图片，图片和图片底部对齐

 

类似结构

 

Html代码  

1. <div><img src="" />text</div>或者<div><img src="" /><img src="" /></div>  

 

原本如果不对image定义其它样式，用img的初始样式就能达到这个效果.

而我开发的页面中文字和图片，图片和图片都是顶部对齐。

当项目开发到一定的阶段，页面比较多，样式也比较多，要修正这个问题还有点问难。

于是我一一排除问题，最后发现原来是我定义的全局样式

 

Html代码  

1. img{vertical-align:top;}  

 

引起的。要解决这个问题只需在要对齐的地方对img重新定义

 

Html代码  

1. img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)  

 

 

至于我为什么用全局样式“img{vertical-align:top;}”请参考img标签下多余空白bug解决方法 。当然我也考虑过采用img{display:block;}来解决“img标签下多余空白bug”，可是很多类似<div><img src="" />text</div>的结构就要花更多的样式去对齐了.

 

2.父容器定义行高后图片和文字的对齐方式

 

类似结构

 

Html代码  

1. <div><img src="" />text</div>  

 

三种情况

1，img{vertical-align:top;}

2，img{vertical-align:middle;}

3，img{vertical-align:bottom;}

 

FF：文字和图片在同一行时

1.文字行高的顶部和图片顶部对齐

2.文字行高的中部和图片中部对齐

3.文字行高的底部和图片底部对齐

 

IE6,IE7，IE8：

1,3两种情况显示效果一样.文字和图片在同一行时，这一行文字定义的行高没有起作用，并且文字相对图片都是顶部对齐的。

2.文字和图片在同一行时，这一行文字的行高等于图片的高度，文字相对图片垂直居中

 

3.文字和图片同时加链接

 

类似结构

 

Html代码  

1. <a href="http://ice-cream.iteye.com"/><img src="" />text</a>  

 

一般链接都会hover时加下划线以示区分，但是我们希望给文字下划线，而不给图片下划线。

 

通常a:hover{text-decoration:underline;}在img的缺省样式下,文字和图片都会显示下划线。

 

如果要把图片的下划线去掉，只需这样定义：

 

当图片和文字之间换行时（文字描述图片）：

 

Html代码  

1. img{display:block;}  

 

当图片和文字同行时（图片表示分类，文字表示内容）：

 

这时图片一般是icon，尺寸较小，建议把icon放入背景图里，页面加载时可以减少http请求，同时也不用对img定义特殊的样式就能达到效果。

 

如果图片较大，可以定义

 

Html代码  

1. img{display:block;float:left;}  

 

同时给文字也浮动。