3-12编程练习：无法实现预期效果，哪里出了问题？
来源：3-12 编程练习
Dantong
2020-06-20 21:08:48
<!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;
vertical-align:middle;
text-align:center;
/*在此补充代码*/
}
.warp1 h1{ color:#fff;
font-size:24px;
/*在此补充代码*/ }
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
vertical-align:middle;
text-align:center;
/*在此补充代码*/
}
.content{
/*在此补充代码*/
line-height:1.5em;
font-size:14px;
display:table;}
.content p{ width:500px;
font-family: "微软雅黑";
margin:0 auto;
display:table-cell;
vertical-align: middle;
text-align: center;
/*在此补充代码*/}
</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>
2回答
-
好帮手慕粉
2020-06-22
同学你好，关于同学的问题回答如下：
1、我们需要先知道，当元素设置为display: table-cell这个属性后，它就相当于td了，而td里面的内容默认是垂直居中显示的，设置了display: table-cell;vertical-align: middle;这两个属性之后，跟td的功能就一样了。
2、再来看这个内容。因为需要让文字垂直居中显示，所以需要给文字的父元素设置display: table-cell属性，也就是给content设置，但是在给元素设置display: table-cell属性之前，需要给其父元素设置display: table属性才可以，所以这里给warp2设置了display: table属性。也就是为什么嵌套了两层div，就相当于table（warp2）>td（content）>p（文字内容）。
祝学习愉快~
0 -
好帮手慕粉
2020-06-21
同学你好，关于同学的问题回答如下：
1、页面出现了横向滚动条：
这是因为在给wrap2容器设置了宽度为100%以后，又设置了边框，导致内容超出了父容器。可以只给其设置底边框：
2、因为content容器是由内容撑起来的，所以可以先让content容器整体居中显示：
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0h020-06-22
