HTML&CSS——line-height设置成height使得文字居中

来源:互联网 发布:埃森哲java面试题 编辑:程序博客网 时间:2024/06/05 07:01
首先行高是文字的字符大小和字符上下的边距决定的,关键就是这个上下的边距是相等的,你可以把行高想象是两条看不见的水平平行线,而在平行线内,字符与平行线上下的边距总是相等的,就是垂直居中的意思。而height这个属性是盒子属性的高度,盒子并没有像行高这样与上下的边距是相等的要求。而是默认在左上角所以不是行高line-height与文字高height一样就能让文字居中,而是应该这样理解,字符本来就在行高内垂直居中了,只是行高与文字的盒子高度不等,导致不能在盒子里垂直居中,如果我们把行高line-height与盒子的height设置为一样大,意思就是行高的平行线与盒子的上下边重合了,这时字符当然仍是在行高内垂直居中,但也顺便在盒子内垂直居中。
0 0
原创粉丝点击