你的位置:首页 > 网页设计

[网页设计]为什么只设置line


为什么只设置line-height就可以实现文本垂直居中效果:
在实际应用中,如果让单行文本在元素中垂直居中,可以将元素的高度和行高值设置为相同即可。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{ width:200px; height:50px; background:#CCC; line-height:50px; text-align:center;}</style></head><body><div>蚂蚁部落softwhy.com</div></body></html>

上面的代码实现了我们的要求,div中的单行文本可以在div中垂直居中,使用的方式非常的简单,将height属性值和line-height属性值都设置为50px即可。其实在实际应用中,完全没有必要使用height属性,只用line-height就可以实现此功能,代码修改如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{ width:200px; background:#CCC; line-height:50px; text-align:center;}</style></head><body><div>蚂蚁部落softwhy.com</div></body></html>

上面的代码虽然没看使用height属性,同样可以产生一个高度,并且可以使文字垂直居中。
看上去是不是有点奇怪,其实这是非常正常的表现,这是由于line-height属性产生的作用,下面做一下简单介绍。
在默认状态下,如果没有其他因素的干扰,文本会被一个content area box包裹,它的大小有字体的大小决定,这个时候content area box的大小和line box是相同的,当设置line-height属性之后,会有如下处理:
1.获取半行间距:半行间距=(line-height-content area box(也就是字体的大小))/2。
2.然后把半行间距分别放置于content area box上下两侧,这样就获取了line box的高度尺寸。于是只要设置行高就可以产生一个高度,并且使文字居中。
特别说明:这里为了简略说明,故意省略一个inline box概念,具体可以参阅line-height属性深入介绍一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15915

更多内容可以参阅:http://www.softwhy.com/divcss/