首页 技术 正文
技术 2022年11月16日
0 收藏 398 点赞 2,486 浏览 653 个字

大家都知道,如何设置文字垂直居中,也就是:设置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 行高的一些理解和技巧关于line-height 行高的一些理解和技巧关于line-height 行高的一些理解和技巧

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,956
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,480
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,327
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,110
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,741
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,776