vertical-align 的使用

vertical-align 使用及注意点

vertical-align: 作用设置垂直方向对齐方式
一般情况下，搭配 行内块级元素使用
常用参数：middle / top / bottom

当两个div都设置了行内块元素，其中一个输入文字，会因为字体对齐方式以基线为准，所以会掉下来, 所以需要设置 vertical-align,让他不要以文字基线对齐，以盒子对齐。

注意点

vertical-align 失效原因分析：
1.元素设置了浮动
2.身边没有元素，所以没有参考系对比
3.元素display，不是inline-block
4.浏览器，不支持display:inline-block

另外，关于display:inline-clock布局优缺点:
优点：
1.解决元素共行问题
2.设置元素的宽高
缺点：
1.容器的宽度，容易受空白节点的影响，如换行符，字体
2.需要复写继承于父容器的font-size:0 ,防止文字不显示
3.设置vertical-align:top，防止元素垂直方向不对齐
4.元素需要两端对齐的时候，设置其中一端的宽度，顶过去
无法灵活实现两端对齐