aaa老师求解！我实现不了这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{ font-size:24px;
height:80px;
width: 100%;
background-color: #14191e;
/*在此补充代码*/
text-align:center;
display:table;
}
.warp1 h1{ color:#fff;
display:table-cell;
line-height:80px;
/*在此补充代码*/ }
.warp2{ font-size:14px;
height:400px;
width: 100%;
border:1px #14191e solid;
display:table;
text-align:center;
/*在此补充代码*/
}
.content{ display:table-cell;
line-height:1.5em;
/*在此补充代码*/
}
.content p{ width:500px;
font-family: "微软雅黑";
margin:0 auto;
width:500px;
margin:0 auto;
/*在此补充代码*/}
</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>
正在回答
你好同学，设置如下属性就可以了哦：
在上一节课程有讲过相关的内容，如果同学不会，建议再把课程复习一下，地址如下：
https://class.imooc.com/lesson/753#mid=18765
祝学习愉快 ，望采纳。
你好同学，有区别的哦。line-height是设置文本行高的，用行高只能设置单行文本居中。可以通过给多行文本设置居中去理解，如下设置行高的值等于容器的高度值，那么每一行文字的行高都是400px，所以如果代码中.content里面只有一行文本可以这样去做。
而vertical-align: middle;是设置内容对齐方式的，一般用于与表格td中的内容的对齐方式。也就是说它是设置一个盒子里面的内容相对于这个盒子的对齐方式。所以代码中要把.content设置table-cell，相当于单元格td. 然后给它设置 vertical-align: middle;，让它整体的内容相对于它居中显示哦。
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星