页脚的文本居中问题

页脚的文本居中问题

页脚的.foot .list已设置了text-align:center,为什么li 没有居中

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{

        padding:0;

        margin:0;

        color:white;

        font-size:14px;

        

    }

    

    body{

        width:100%;

        /*max-width:1600px;*/

        

    }

    .head{

        height:100px;

        background:black;

        width:100%;

        /*max-width:1600px;*/

        

        overflow:hidden;

        position:fixed;

        top:0;

        line-height:100px;

        

    }

    .logo{

        width:300px;

        height:100px;

        float:left;


    }

    .head .list{

        float:right;

        list-style:none;

        margin-right:50px;

    }

    .head .list li{

        float:right;

        margin-left:50px;


    }

    .con{

      font-size:0px;

      width:100%;

      /*max-width:1600px;*/

      margin-top:100px;

      margin-bottom:100px;



      }

      img{width:100%;}

      .foot{

        width:100%;

        height:100px;

        background:black;

        position:fixed;

        bottom:0;



      }

      .foot .list{

        list-style:none;

        width:500px;

        height:100px;

        text-align:center;

        margin:0px auto;

        

      }

      .foot .list li{

        float:left;

        /*display:inline-block;*/

        /*margin:0px auto;*/

        line-height:100px;

        

        /*margin:0px 30px;*/

        /*margin-left:80px;*/

      }/*此处写代码

  </style>

</head>

<body>

  <div class="head">

      <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>

      <ul class="list">

          <li>课程</li>

          <li>课程</li>

          <li>课程</li>

          <li>课程</li>

      </ul>

  </div>

  <div class="con">

      <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg "><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">

  </div>

  <div class="foot">

    <ul class="list">

      <li>课程</li>

      <li>课程</li>

      <li>课程</li>

      <li>课程</li>

    </ul>

  </div><!-- 此处写代码 -->

</body>

</html>


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

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

3回答
好帮手慕夭夭 2019-03-08 19:14:55

你好同学 , 老师在第一次回复中说过了哦 , ul是块元素 , text-align: center;不能让它块元素居中的 . 同学理解的对块元素有效 ,可能是给一个块元素设置 text-align: center;能够让它里面的内容居中 . 

同学如果还是不太理解的话 ,可以写两个div , 给父元素盒子设置设置text-align: center;  ,它是不能让里面的div居中显示的 .

祝学习愉快 ,望采纳 .

好帮手慕夭夭 2019-03-08 17:45:05

你好同学 , 这里是不可以的 ,可以自己去测试一下哦 ,如下:

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

祝学习愉快 望采纳 .

  • 提问者 Leeluo #1
    不知道是什么原因?为什么要把ul转化为inline-block?
    2019-03-08 18:44:16
好帮手慕夭夭 2019-03-08 10:11:05

你好同学 ,代码中li设置了浮动脱离文档流  , 所以text-align: center;对于它里面的内容就无效了 .这里ul并没有设置浮动 , 所以可以给ul的父元素设置text-align: center; , 让ul居中对齐 ,因为ul是块元素 ,可以把它设置成行内块元素才会有效果  , 如下 ,

ul可以去掉宽度 ,给li直接设置一些间距

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

祝学习愉快 ,望采纳 .

  • 提问者 Leeluo #1
    text-align:center,也可以对ul块元素有效呀,为什么要把ul转化为inline-block?
    2019-03-08 17:10:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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