实例：
<p>
<img src="" />
<span></span>
</p>显示：
原因分析：基线不对齐
解决方法
两个行内元素都设置
vertical-align:middle;两个元素设置浮动
设置 vertical-align:middle; 的具体原因如下：
从CSS2的可视化格式模型文档中可以看到：
inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。
举例：
<style>
.dib-baseline{
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #cad5eb;
background-color: #f0f3f9;
margin-top: 20px;
}
</style>
<span class="dib-baseline"></span>
<span class="dib-baseline">dib-baseline</span>运行结果：
因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。
如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以：
这就是为什么出现这个问题的原因，可以通过改变对齐方式达到对齐效果。
更多前端开发知识，请查阅 HTML中文网 ！！
以上就是css两个行内元素不对齐怎么解决？的详细内容，更多请关注易知道|edz.cc其它相关文章！
