3-12编程练习：无法实现预期效果，哪里出了问题？

<!DOCTYPE html>

<html>

<head>

<title>vertical-align</title>

*{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>

<h1>欢迎来到慕课网</h1>

</div>

<p>慕课网，只学有用的！</p>

<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>

</div>

</body>

</html>

Dantong 2020-06-20

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

收起

2回答

好帮手慕粉 2020-06-22 15:37:15

同学你好，关于同学的问题回答如下：

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（文字内容）。

祝学习愉快~

收起回答

好帮手慕粉 2020-06-21 09:55:34

同学你好，关于同学的问题回答如下：

1、页面出现了横向滚动条：

这是因为在给wrap2容器设置了宽度为100%以后，又设置了边框，导致内容超出了父容器。可以只给其设置底边框：

2、因为content容器是由内容撑起来的，所以可以先让content容器整体居中显示：

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

收起回答

提问者 Dantong #1

好的，谢谢老师，我还有一个问题，请问这段代码里，为什么要设置两个<div>呢？我是在第二个div里display：table就无法得到设定的输出，但是你改成在第一个div里设置display：table就得到了输出。代码：<div class="warp2"> <div class="content"> <p>慕课网，只学有用的！</p> <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p> </div> </div>

2020-06-22 12:38:41