分清height、line-height和font size，height并不能限制line-hight，line-hight也不能限制font size，三者是相对独立的
如果没有设置hight，则hight由line-hight决定
line-hight决定块级元素的line boxes高度，inline boxes是line boxes的子容器而并不是<div>的子容器，vertical-align: middle;也是inline boxes针对line boxes的而不是针对div的；div块元素本身可以包含多个line boxes
如果父子元素都没有设置line-height，则适配font size
如果父子元素都设置了line-height，子小于父就各用各的值，如果子大于父就都用子的值
如果父设置了line-height，子没有设置，则子继承父的
垂直居中示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center {
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
