1 2 3 4 5 6 7 8 9 |
|
效果如下:
1 2 3 4 5 6 7 8 9 |
|
显而易见的结果就是因为有了height所以有高度,没有height则因为有了line-height而有了高度 更多详细的细节其实是因为 每一行文字 都有一个line boxes, 这些一个个盒子自然撑起了父元素的高度。
同时,观察上面的例子就能发现文字的中线和line-height的中线是在相同位置的,所以才有了常用的那套居中办法:
1 2 3 4 5 6 |
|
设置line-height和height相同数值则可以使得其中文字垂直居中
从结果来看确实如此,但是这句话不对,这句话多余了几个字,完全不需要设置height,只需要line-height就可以做到文字垂直居中了。
以上就是CSS中line-height详解(代码实例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者