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

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

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

           line-height:80px;

           text-align:center;

             }


     .warp1 h1{ color:#fff;

                  

       }


     .warp2{

              height:400px;

              width: 100%;

              border:1px  #14191e solid;

              display:table                  

             }


     .content{    

              display:table-cell;

              vertical-align:middle;

              text-align:center;

              }


     .content  p{ width:500px;

                  font-family: "微软雅黑";

                  margin:0 auto;

                  font-size:14px;

                  line-height:2em;

                  }   


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

http://img1.sycdn.imooc.com//climg/5da70dc109636c0211770484.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2019-10-17 17:55:37

同学你好!

抱歉,又思考了下之前回复中设置宽度的方法是多余的,有一点多此一举的意思。按照同学的代码,只要去掉text-align: center;就可以实现效果图中的效果:

http://img1.sycdn.imooc.com//climg/5da839990908ddb412940520.jpg

可以分析下,中部div中的文字是左边对齐的,所以要去掉text-align: center;就可以了。而实现整个div的居中的话,是源代码中的:width:500px;margin:0 auto;起到的作用(设置固定宽度,margin实现元素的拔河效应),在下一章盒子模型中会学到哦~

如果帮助到了你,欢迎采纳,祝学习愉快~~

好帮手慕码 2019-10-17 09:43:58

同学你好!

这里可以给content设置固定的宽度,例如:

http://img1.sycdn.imooc.com//climg/5da7c75109ad818a04400235.jpg

效果:

http://img1.sycdn.imooc.com//climg/5da7c7540946ba1008040446.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕少7027160 #1
    请问老师,这个以后会学到吗
    2019-10-17 13:44:21
  • 好帮手慕码 回复 提问者 慕少7027160 #2
    同学可以说一下是哪块的知识点,以便老师准确帮助同学查找哦~
    2019-10-17 15:36:17
  • 提问者 慕少7027160 #3
    老师,我的意思是:怎么判断出的加了widti:500px就可以实现这个效果呢。 这个知识点前面好像没学到过呢
    2019-10-17 17:25:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师