CSS3 vertical-align 无效的问题

转自 https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral

vertical-align:middle的定位方式是：将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

父盒子在排列子盒子的时候，一般都是把它们的baseline对齐，默认也就是底部对齐。因此父盒子的baseline也就是子盒子的baseline一般是元素底部

父盒子的x-height：由于chrome下默认font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px

解决方案：
        将最高的元素设置为vertical-align: middle，然后想要居中的也要设置为vertical-align: middle
（由于父盒子会将它们中线对齐，默认最高的子元素的中线即为待对齐的中线）