                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。这是什么原理？

qq_中二兔纸_0

2016-03-25

源自：初识HTML(5)+CSS(3)-升级版 15-8

关注问题我要回答

720

操作

收起

2 回答

YGJ
2016-03-25

line-height呢，你可以理解为每行文字所占的高度。比如说，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。显然，每个字的大小只有20px，那怎么边呢？于是呢，浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。这样的话，那文字就在这50px的空间内是居中的了。