w3ctech

关于 height 和 line-height 使文字垂直居中的问题

文字垂直居中是前端常常遇到的一个问题(关于其他任意元素垂直水平居中可以 Google 各种解决方案,其中一个 absolute 的方法比较奇特,我其实是很想用 CSS3 的解决方案的...)。

在 CSS2.1 的时候的解决方案就是设置 height = lineHeight 就 OK 了,所以 Baidu 上绝大部分方案都是这样的。但是现在你可能会发现,虽然进行了这样的设置,但是文字明显偏下了,原因就是 line-height 的高度大于 “height” 的高度了!

今天在 console 解决这个问题的时候,偶然发现当我把 line-height 设置成 content 的高度(蓝色区域)的时候,文字就垂直居中了!

因为现在我们很多的 CSS 在 Reset 的时候都会把 box-sizing 设置成 "border-box",这样就导致了 height 并不总是等于 content 的高度!所以,当 lineHeight = height - borderWidth - padding 的时候,line-height 的高度才等于 content 的高度,文字才垂直居中!所以在设置上要注意一下喽。

希望对像我一样的菜鸟们有所帮助,哈哈!

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复