关于line-height

为什么最后那一步把line-height调成40px字就垂直居中了啊？

qq_卡可酷_0

2015-12-19

源自：导航条菜单的制作 4-1

关注问题我要回答

671

操作

收起

3 回答

lynhao 回答被采纳 +3 积分
2015-12-19

line-height: 顾名思义，行高，指代文本中，行与行之间的基线间的距离，如图

2 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1
2015-12-19

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
/*如果line-height的值等于容器的高度，容器内的单行文本就会垂直居中,比如这样写的话，字就是垂直居中的*/
#demo{
padding:10px;
width:800px;

height:60px;/*容器高度*/
line-height:60px;/*和容器的高度相等*/

border:2px solid #f00;
}
</style>
</head>
<body>

<div id="demo">
这里的字是垂直居中的
</div>

</body>
</html>