类似结构
Html代码
<div><img src="" />text</div>或者<div><img src="" /><img src="" /></div>
原本如果不对image定义其它样式，用img的初始样式就能达到这个效果.
而我开发的页面中文字和图片，图片和图片都是顶部对齐。
当项目开发到一定的阶段，页面比较多，样式也比较多，要修正这个问题还有点问难。
于是我一一排除问题，最后发现原来是我定义的全局样式
Html代码
img{vertical-align:top;}
img{vertical-align:top;}引起的。要解决这个问题只需在要对齐的地方对img重新定义
Html代码
img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)
img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)采用img{display:block;}来解决“img标签下多余空白bug”，可是很多类似<div><img src="" />text</div>的结构就要花更多的样式去对齐了.
2.父容器定义行高后图片和文字的对齐方式
类似结构
Html代码
<div><img src="" />text</div>
<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.文字和图片在同一行时，这一行文字的行高等于图片的高度，文字相对图片垂直居中
最近工作中遇到些关于“图片和文字的对齐”的问题：
1.文字和图片，图片和图片底部对齐
类似结构
Html代码 <div><imgsrc=""/>text</div>或者<div><imgsrc=""/><imgsrc=""/></div>
<div><img src="" />text</div>或者<div><img src="" /><img src="" /></div>
原本如果不对image定义其它样式，用img的初始样式就能达到这个效果.
而我开发的页面中文字和图片，图片和图片都是顶部对齐。
当项目开发到一定的阶段，页面比较多，样式也比较多，要修正这个问题还有点问难。
于是我一一排除问题，最后发现原来是我定义的全局样式
Html代码 img{vertical-align:top;}
img{vertical-align:top;}
引起的。要解决这个问题只需在要对齐的地方对img重新定义
Html代码 img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)
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代码 <div><imgsrc=""/>text</div>
<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.文字和图片同时加链接
类似结构