首页 > Web开发 > 详细

[css]单/多行居中&字体设置

时间:2018-02-13 22:09:39      阅读:395      评论:0      收藏:0      [点我收藏+]

标签:所有   我们   pre   msu   pos   mes   http   rom   log   

行高和字号

行高

CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的。

line-height: 40px;

技术分享图片

文字,是在自己的行里面居中的。比如,现在文字字号14px,行高是24px。那么:
技术分享图片

为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。

单行文本垂直居中

技术分享图片
需要注意的是,这个小技巧,行高=盒子高。 只适用于单行文本垂直居中!!不适用于多行。
如果想让多行文本垂直居中,需要设置盒子的padding:

下面是多行文字垂直居中的算法
技术分享图片

字体设置

font属性能够将font-size、line-height、font-family合三为一:

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。

font:12px/200% “宋体”  等价于
font:12px/24px “宋体”;

[css]单/多行居中&字体设置

标签:所有   我们   pre   msu   pos   mes   http   rom   log   

原文:https://www.cnblogs.com/iiiiiher/p/8447476.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号