老师请检查下,还想问下为什么margin:0 auto不但能段落居中还能第一段居中靠左对齐啊?

老师请检查下,还想问下为什么margin:0 auto不但能段落居中还能第一段居中靠左对齐啊?

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

           line-height:80px;

             }


     .warp1 h1{ color:#fff;

           /*在此补充代码*/ 

          font-size:24px;

     }


     .warp2{

              height:400px;

              width: 100%;

              border:1px  #14191e solid;

              /*在此补充代码*/

              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

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

2回答
好帮手慕夭夭 2020-06-21 11:47:09

同学你好,视频中是设置了文本居中对齐的样式,如下:

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

看视频的时候,不能只看效果,不认真看代码哦,不然学习的效率是不高的。在学习的时候,可以把视频案例多敲几遍,熟练的掌握课程所学内容哦。

祝学习愉快~

好帮手慕夭夭 2020-06-21 10:30:52

同学你好,margin:0 auto是设置居中的,并没有向左对齐的效果。文字本身就是从左往右显示的,所以左对齐是段落默认的效果哦。

另外,代码实现正确。继续加油,祝学习愉快~

  • 提问者 吹吹风泡泡茶 #1
    但是我回顾看了下教程,教程里面设置了之后就是完全居中对齐了,我自己设置发现是居中靠左对齐。。。
    2020-06-21 11:20:23
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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