项目中,经常会用到line-height和vertical-algin来解决垂直居中的问题,但对其原理和应用限制却很少了解。因此做了一下总结:
line-height具有继承性,对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致(已验证),当设置了line-height但是没有设置高度的情况下,高度由line-height决定。
vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同,但是它的middle值得实现却基本相同,因此用来实现垂直居中是可以的。默认是baseline居中。只对inline-block和table-cell的元素起作用。