老师检查一下

来源:3-12 编程练习

慕虎5913535

2019-03-10 10:31:49

<!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;              
           /*在此补充代码*/
           		text-align: center;
             }

     .warp1 h1{ color:#fff;
     			font-size: 24px;
     			vertical-align: center;
       /*在此补充代码*/ }


     .warp2{
              height:400px;
              width: 100%;
              border:1px  #14191e solid;
              /*在此补充代码*/     
                 /*text-align: center;*/
				display: table;
             }

     .content{    
              /*在此补充代码*/
				display: table-cell;
				vertical-align: middle;
              }

 	.content p{ width:500px;
		             font-family: "微软雅黑";
		             margin:0 auto;
		             line-height: 1.5em;
		             font-size: 14px;
        /*在此补充代码*/}  



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


写回答

1回答

Steve007

2019-03-11

同学,你好。顶部的标题没有垂直居中,如图:

http://img.mukewang.com/climg/5c85beaf00015a4410450082.jpg

建议设置行高等于高来实现标题的垂直居中。如图:

http://img.mukewang.com/climg/5c85bef20001a82f07190204.jpg

祝学习愉快!

0

0 学习 · 36712 问题

查看课程