div包裹了p.实现垂直居中为什么用上一个div无效呢？
来源：3-12 编程练习
Golden几何
2020-05-09 18:41:43
<!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;
/*在此补充代码*/
}
.warp1 h1{ color:#fff;
text-align:center;
vertical-align:middle;
font-size:24px;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
display:table;
}
.content{
vertical-align:middle;
margin:0 auto;
display:table-cell;
}
.content p{ width:500px;
font-family: "微软雅黑";
margin:0 auto;
line-height:1.5em;
font-size:14px;
width:500px;
}
</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>
5回答
-
同学你好， 这个是规定好的，vertical-align在表格中应用就是给单元格设置的。warp2设置display:table相当于table元素，content设置 display:table-cell相当于单元格td元素。拿一个表格举例子：
因为单元格td默认就是居中，所以下面设置了向上对齐，道理都是一样的。content相当于td，这里只能给单元格设置对齐方式，而不是table元素设置。再理解一下哦
祝学习愉快 ~
1 -
好帮手慕码
2020-05-10
同学你好，因为vertical-align: middle;是设置单元格居中的，直接给标题标签设置的话不生效，所以需要先给父元素设置成表格：
祝学习愉快~
1h020-05-11 -
好帮手慕码
2020-05-10
同学你好，.wrap2中的p元素是跟随着父元素实现了水平居中的（移动了哦~）：
跟“p的状态”是没有关系的。
可以再试一下。
祝学习愉快~
0h020-05-10 -
好帮手慕码
2020-05-10
同学你好，不太理解同学的意思。请问是说：只给.content设置vertical-align：middle之后，p元素并没有实现垂直居中是吗？
因为vertical-align: middle;是设置单元格居中的，所以需要先给父元素设置成表格：
然后给子元素设置成单元格才可以生效：
如果不是这个意思的话，可以详细描述一下问题所在，以便准确的帮助同学解答。
祝学习愉快~
0h020-05-10 -
好帮手慕夭夭
2020-05-09
同学你好，是说的标题实现居中无效吧？vertical-align: middle;是设置单元格居中的，所以需要先给父元素设置成表格，如下：
然后给子元素设置成单元格才可以生效。
如果标题想要居中，也要按照如上去操作。当然了，这种方式比较麻烦，实际开发中不会这样去做。这里直接给标题设置行高居中。原理就是让行高值等于容器高度值：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-05-09
相似问题