line-height属性技巧
使只含一行内容的段落的文字内容水平居中
line-height是一种文本属性,指示行高,浏览器默认的行高较小,通常使段落文字显得比较密集,增加行高可以使段落看上去更加舒服。行高可以以像素作为单位,如(px,em),也可以以百分比作为单位,如下设置行高为基准值的1.5倍
p{ line-height:150% }
除了疏松文字在高度之间的距离的用途外,行高还可以附带的实现垂直居中文字的作用,如:
p{ height:50px; line-height:50px; }
如上所示,在块级元素中只要将行高即line-height属性值,设置为等于height即高度值即可居中块级元素内的文字,前提是改块级元素的内容只有一行,否则行高等于高度也不现实,所以应用于h1,h2等标题类元素比较多。
另一个居中文字(内联元素)的属性是 text:align?
百分比与小数点(系数)的差别
将line-height设置为150%或1.5有什么差别吗?
其实,两者的差别在于属性的继承性,使用百分比时,会首先计算父元素的line-height值,直接将这一像素值传递继承给子元素,而使用无单位的1.5时,则会直接将1.5这个系数传递继承给子元素,而后子元素再按照该系数计算自己对应的像素值。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35687.html