div包裹了p.实现垂直居中为什么用上一个div无效呢？

<!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>

Golden几何 2020-05-09

源自：CSS文本样式 3-12 编程练习

收起

5回答

好帮手慕夭夭回答被采纳获得+3积分 2020-05-11 11:07:09

同学你好，这个是规定好的，vertical-align在表格中应用就是给单元格设置的。warp2设置display:table相当于table元素，content设置 display:table-cell相当于单元格td元素。拿一个表格举例子：

因为单元格td默认就是居中，所以下面设置了向上对齐，道理都是一样的。content相当于td，这里只能给单元格设置对齐方式，而不是table元素设置。再理解一下哦

祝学习愉快 ~

收起回答

好帮手慕码 2020-05-10 19:07:29

同学你好，因为vertical-align: middle;是设置单元格居中的，直接给标题标签设置的话不生效，所以需要先给父元素设置成表格：

祝学习愉快~

收起回答

提问者 Golden几何 #1

.warp2{ height:400px; width: 100%; border:1px #14191e solid; display:table; }发错了发错了，不好意思，跟标题没关系。不懂的是为什么不能在这里加vertical-align?实现垂直居中的功能？可以再问最后一次吗？

2020-05-11 07:25:22

好帮手慕码 2020-05-10 17:17:50

同学你好，.wrap2中的p元素是跟随着父元素实现了水平居中的（移动了哦~）：

跟“p的状态”是没有关系的。

可以再试一下。

祝学习愉快~

收起回答

提问者 Golden几何 #1

.warp1{ height:80px; width: 100%; background-color: #14191e; /*在此补充代码*/ }额。。。为什么不能在这里加vertical-align?实现垂直居中的功能？

2020-05-10 18:19:22

好帮手慕码 2020-05-10 09:36:46

同学你好，不太理解同学的意思。请问是说：只给.content设置vertical-align：middle之后，p元素并没有实现垂直居中是吗？

因为vertical-align: middle;是设置单元格居中的，所以需要先给父元素设置成表格：

然后给子元素设置成单元格才可以生效：

如果不是这个意思的话，可以详细描述一下问题所在，以便准确的帮助同学解答。

祝学习愉快~

收起回答

提问者 Golden几何 #1

为什么设置.content上面的.wrap时p元素不动。此时的p的状态不是被一个块元素包裹吗。

2020-05-10 14:07:17
提问者 Golden几何 #2

补充：老师是.content上面.wrap2哦

2020-05-10 14:11:40

好帮手慕夭夭 2020-05-09 19:42:18

同学你好，是说的标题实现居中无效吧？vertical-align: middle;是设置单元格居中的，所以需要先给父元素设置成表格，如下：

然后给子元素设置成单元格才可以生效。

如果标题想要居中，也要按照如上去操作。当然了，这种方式比较麻烦，实际开发中不会这样去做。这里直接给标题设置行高居中。原理就是让行高值等于容器高度值：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者 Golden几何 #1

不是，老师，是请问.wrap2对.content设置垂直居中对文本内容无效。.coontent不是包裹了p元素吗？p不会随着.content元素移动吗？

2020-05-09 19:51:42
提问者 Golden几何 #2

是因为p是块元素，然后vertical-align在这里只对子元素内文字生效，而不是p元素吗？

2020-05-09 20:00:47