老师帮忙检查下
来源：3-12 编程练习
不努力怎能喊累
2019-02-14 21:33:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直对齐练习题</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{
height:80px;
width: 100%;
background-color: #14191e;
/*在此补充代码*/
}
.warp1 h1{ color:#fff;
/*在此补充代码*/
text-align: center;
font-size: 24px;
line-height: 80px;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/
display: table;
}
.content{
/*在此补充代码*/
display: table-cell;
vertical-align: middle;
}
.content p{ width:500px;
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>
老师帮忙看下是否正确，对display:table;和display:table-cell这个代表什么意思？
1回答
-
好帮手慕夭夭
2019-02-15
你好同学 , 效果实现了 . display: table;就是把元素转换为表格 . 相当于table .
display: table-cell;是把元素变为单元格 ,相当于td . 因为vertical-align: middle;一般用于表格中的对齐方式 .所以要先把元素转换为有表格 ,然后再进行居中设置 .
祝学习愉快 ,望采纳 .
0
相似问题