请问为什么设置p标签中的line-height为100%使标签中的内容垂直居中没有效果？
来源：4-6 案例应用
慕桂英2021900
2019-07-16 15:28:25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
body,p,div{margin: 0px;padding: 0px;font-family: "微软雅黑";}
.course{
width: 220px;
background-color: #f2f4f6;
border:1px solid #ececec;
margin: 0px auto;
}
.d1{
width: 100%;
height: 150px;
background-color: black;
}
.d1 p{
color: white;
text-align: center;
line-height: 100%;/*设置父元素高度150px有用，设置百分比没有效果*/
}
</style>
</head>
<body>
<div class="course">
<div class="d1">
<p>前端课程排列</p>
</div>
<div class="d2">
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
<div class="d3">
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
<div class="d4">
<p>HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
</div>
</body>
</html>
1回答
-
你好同学，行高是设置字体间距的，如果使用百分比，那么它参照的是当前字体尺寸的百分比行间距。而不是父容器的高度，这里重新理解一下。
所以想要在父容器中垂直居中，直接使用px设置：
祝学习愉快，望采纳。
0
相似问题