1. 程式人生 > >[css]單/多行居中&字體設置

[css]單/多行居中&字體設置

所有 我們 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]單/多行居中&字體設置