3-12课后习题问题
来源:3-12 编程练习
慕用2429104
2019-08-20 21:53:03
老师帮忙看一下,为什么我的垂直居中不起作用呢
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.wrap1{
background-color: black;
}
h1{
font-size:24px;
text-align: center;
color:white;
}
.content{
line-height: 1.5em;
font-size:14px;
width:500px;
margin:0 auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="wrap2">
<div class="content">
<p>慕课网只学有用的</p>
<p>慕课网是IT技能学习平台。慕课网提供了丰富的移动端开发、php开发、web前端、Andriod开发以及html5教程公开课。并且具有交互性以及趣味性,你还可以和朋友一起编程。</p>
</div>
</div>
</body>
</html>
2回答
你好同学,vertical-align: middle;需要配合display: table-cell;等属性去使用,但是同学的代码中没有设置。课程中有讲解,建议同学先去复习一下课程,把课程中的案例学会了,然后再来练习更好哦。
课程地址:https://class.imooc.com/lesson/753#mid=18765
祝学习愉快,望采纳。
铁锅炖大大鹅
2019-08-21
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/
display: table;
}
.content{
/*在此补充代码*/
display: table-cell;
vertical-align: middle;
}
相似问题