图片与文字对齐问题

[lencx]

当图片与文字在同一行显示时，会发现文字与图片会产生错位，出现问题的原因是什么？该如何解决？

[dajin1234]

vertical-align: middle

[lencx]

可以解释一下问题出现的原因吗？

[dxl519]

原因
1.在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个看不见摸不着没有宽度没有实体的空白节点
2.图片下有空隙的深入原因vertical-align默认的对齐方式是baseline.,所以对齐的是x的下边而不是所有文字的最下边文字的高度，文字的高度由line-height决定(line-height多数浏览器[Georgia字体下]默认为font-size的1.14倍，如果未设定font-size，那既是基准值16px的1.14倍).所以空白节点有了line-height.

解决方案
1.既然是块状元素的内联元素才这样，就对元素img 显示为块状元素img{display:block}
2.img的对齐方式是默认的baseline,解决方案是改为img{vertival-align:bottom}
3.因为后面的空白节点有line-height(line-height与font-size有关);解决方案是div{font-size:0}或者是div{line-height:0},若有其他文字时，这个方法不能显示字体.
解决方案选择2方案最佳. 推荐解决方案选择1或者2，不影响其他元素