码迷,mamicode.com
首页 > 其他好文 > 详细

关于line-height 行高的一些理解和技巧

时间:2017-01-19 19:43:37      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:行高   补充   接下来   div   图片   垂直居中   水平   bsp   问题:   

大家都知道,如何设置文字垂直居中,也就是:设置line-height 和 外围盒子的高度height一致;

其实这里有个地方,是多余的,也就是height,设不设置都居中;

 

那么,行高是生产高度的?

 

先上一个小问题:当div没有设置高度的情况下,撑开其高度是里面的文字吗?

答案是否定的,你可以试试,当你设置行高为line-height: 0; 的时候,div的高度还是0;事实证明,撑开div高度与其里面文字的行高有关系;

先理解下,inline box模型,其中有个line boxes,它是看不到摸不着的东西,它的工作是包裹每行文字,它的属性只有高度height,首先如果div没有设置高度,则其高度是里面一个个line boxes的高度累加而成的;(垂直很多行文字)

但是当只有一行的情况下,line boxes会查询里面哪一个的行高比较大,从而取其高度;如:<div> <span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span></div>,此时line boxes取的行高是40px,从而div的高度为40px;(水平一行文字)

 

接下来,再补充一个妙用,利用line-height和vertical属性实现多行图片垂直水平居中的

父级包裹层设置,line-height 和 height相等和text-align: center,里面的图片设置vertical-align:middle;这样就可以实现了

 

 技术分享技术分享技术分享

 

关于line-height 行高的一些理解和技巧

标签:行高   补充   接下来   div   图片   垂直居中   水平   bsp   问题:   

原文地址:http://www.cnblogs.com/luleixia/p/6308532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!