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

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么只设置line-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;
  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/

以上是关于为什么只设置line-height就可以实现文本垂直居中效果的主要内容，如果未能解决你的问题，请参考以下文章

line-height与vertical-align：简单的属性不简单

Android - 将 ProgressBar 设置为垂直条而不是水平条？

解决各类文本居中问题

0015 行高那些事：line-height

js实现投票demo