html中板块不对齐怎么解决,css两个行内元素不对齐怎么解决？

css两个行内元素不对齐怎么解决？下面本篇文章就来给大家介绍一下两个行内元素不对齐的原因，以及解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

实例：

显示：

原因分析：基线不对齐

解决方法两个行内元素都设置 vertical-align:middle;

两个元素设置浮动

设置 vertical-align:middle; 的具体原因如下：

从CSS2的可视化格式模型文档中可以看到：

inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。

举例：

.dib-baseline{

display: inline-block;

width: 150px;

height: 150px;

border: 1px solid #cad5eb;

background-color: #f0f3f9;

margin-top: 20px;

}

dib-baseline

运行结果：

因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。

如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以：

这就是为什么出现这个问题的原因，可以通过改变对齐方式达到对齐效果。

更多前端开发知识，请查阅 HTML中文网 ！！