居中对齐的原理
line-height可以理解成每行文字所占的高度。他的标准定义是每行文字基线与基线的距离。
例如,有一行20px大小的文字,如果设置为line-height:50px,那就是说,这行文字的高度会占50px。
显然,每个字的大小只有20px,于是浏览器就把多出来的30px(50px-20px)在这行文字的上面加上了15px,下面加上了15px。
这样的话,那文字就在这50px的空间内是居中的了(这个就是浏览器规定的,它就这个分配空间)。
这样的话,如果你的DIV是50px,正好这行文字也就相对于DIV居中了。
所以把line-height设置为容器div的高度就能使文字垂直居中
无法居中对齐的案例
案例一:font简写
height: 40px;
line-height: 40px;
font: 16px bold;
background: #e4393c;
color: #fff;
问题攒的多了,我自己的例子丢了~好气
不过在网上找了一个例子,发现真的没居中~
经过我的尝试,在Chrome浏览器中的结果是:
font的简写形式就是不居中~
而采用他的常用写法font-size:16px
就可以居中啦~
如下:
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight:blod;
background: #e4393c;
color: #fff;