Question

为什么只设置line-height就可以实现文本垂直居中效果_html/css_WEB-ITnose

Answer 1

为什么只设置line-height就可以实现文本垂直居中效果:在实际应用中，如果让单行文本在元素中垂直居中，可以将元素的高度和行高值设置为相同即可。代码实例如下:
蚂蚁部落div{ width:200px; height:50px; background:#CCC; line-height:50px; text-align:center;}蚂蚁部落softwhy.com
上面的代码实现了我们的要求，div中的单行文本可以在div中垂直居中，使用的方式非常的简单，将height属性值和line-height属性值都设置为50px即可。其实在实际应用中，完全没有必要使用height属性，只用line-height就可以实现此功能，代码修改如下:
蚂蚁部落div{ width:200px; background:#CCC; line-height:50px; text-align:center;}蚂蚁部落softwhy.com
上面的代码虽然没看使用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/