实际项目中,常常会遇到一排行内元素对齐排列的需求,但是往往它们是这样的

我们想要的其实是这样的

曾经我一度不得不使用定位来实现我想要的位置效果,将父元素设置 position:relative ,行内元素设置 position:absolute ,然后利用 top 和 left 实现定位

直到有一天我在看《HTML5与CSS3设计模式》

这本书的时候,学习到了 vertical-align 这个属性的时候,才发现有这么一个好方法

 vertical-align:xpx ,x为正值,向上偏移,x为负值,向下偏移

但是可以发现,当想要通过 vertical-align 属性实现相对于容器上边对齐的时候,是实现不了的,因为很多元素实际占据的位置比展现出的空间大,当向上偏移过大的时候,元素无法超出容器,会把整体顶下来,类似于给父元素加了 padding-top 

但是向下偏移的时候就不会出现这种问题,元素也可以超出容器

当然,如果需求只是实现在盒子内对齐一排的话,不用给每个元素设置具体的 vertical-align 的值,只需要给盒子的所有子元素设置 vertical-align: middle 即可,实现效果如下图:

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。