请老师检查一下对吗，对于这一章的display没太理解什么意思

首页课程实战体系课手记专栏慕课教程

来源：3-12 编程练习

宝慕林3013065

2020-04-06 17:31:28

<!DOCTYPE html>

<html>

<head>

<title>vertical-align</title>

*{padding:0px;margin: 0px;}

.warp1{

height:80px;

width: 100%;

background-color: #14191e;

/*在此补充代码*/

}

.warp1 h1{ color:#fff;

text-align:center;

font-size:24px;

/*在此补充代码*/ }

.warp2{

height:400px;

width: 100%;

border:1px #14191e solid;

/*在此补充代码*/

display:table;

}

.content{

/*在此补充代码*/

text-align:left;

vertical-align:middle;

line-height:1.5em;

font-size:14px;

text-align:left;

display:table-cell;

vertical-align:middle;

}

.content p{ width:500px;

font-family: "微软雅黑";

margin:0 auto;

/*在此补充代码*/}

</style>

</head>

<body>

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

</div>

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

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

</div>

</body>

</html>

写回答

1回答

好帮手慕夭夭

2020-04-07

已采纳

同学你好，问题解答如下：

1.标题文字没有垂直居中显示

可以通过行高设置：行高的值等于容器高度就可以垂直居中了

2.display是设置元素类型的。vertical-align: middle;是设置表格中单元格里面的内容垂直居中的，在单元格居中的。所以使用display: table;先让父元素变成表格类型，相当于table元素。把content变成display: table-cell; ，table-cell就相当于单元格td。这样再给单元格设置vertical-align: middle;，里面的内容就可以垂直居中了。

当然了，这种用法在实际开发中不常用，了解一下就行。后续会学习定位，使用定位设置垂直居中即可。

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

0 学习 · 40143 问题

查看课程

相似问题

4-3编程练习检查

回答 3

老师帮忙检查一下代码呗

回答 2

老师，请检查

回答 3

有点听不太懂

回答 2

3-12练习，还是合效果图不一样，请问怎么解决呢

回答 2

打开慕课网App查看更多内容