【Css样式】inline-block 布局错位

需求：水平排列一行div，如图所示

div水平显示

综合考虑选择的display:inline-block
然后出现了上面的问题，含文字的部分错位，显示靠下了
原因是inline-block默认是基于baseline方式对齐的
解决方式是设置：vertical-align属性为middle

完美解决：

水平显示