请检查3-12.没法理解将line-height 设置成元素高度，就能居中
来源：3-12 编程练习
悉尼audrey
2019-10-29 16:32:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{
height:80px;
width: 100%;
background-color: #14191e;
text-align:center;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/ line-height:80px;
font-size:24px;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
display:table;
text-align:center;
}
.content{
/*在此补充代码*/
display:table-cell;
vertical-align:middle;
}
.content p{
font-family: "微软雅黑";
margin:0 auto;
line-height:1.5em;
font-size:14px;
/*在此补充代码*/}
</style>
</head>
<body>
<div class="warp1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="warp2">
<div class="content">
<p>慕课网，只学有用的！</p>
<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
</div>
</div>
</body>
</html>
1回答
-
同学你好，
1、测试与效果图中不一致：
p标签需要设置宽度，任务中是有提示的哦：
并且文本不是居中的，左对齐显示，如下修改：
2、行高的问题：
行高的值是文本内容的高度加上它上下的间距。由于文字自身解析的特点，它上下间距是一样的，也就是半行距为（行高-字体size）/2 ，文字始终是居中的。所以当你设置文字的行高等于父元素的高度值时，它就恰好在父元素中居中了：
自己再测试下，祝学习愉快！
欢迎采纳~
0
相似问题