老师为什么页脚内容不能居中显示?

老师为什么页脚内容不能居中显示?


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{padding:0;margin:0;}

    .hader{width:100%;height:50px;background-color:#666;margin:0 auto;line-height:50px;position:fixed;}

    .centin{margin-top:0px;}

    .centin img{display:block;}

    img{padding:0;}

    .foot{width:100%;height:30px;background-color:#666;margin:0 auto;position:fixed;line-height:30px;bottom:0;}

    .hader ul{float:right;overflow:hidden;margin-right:30px;

        list-style-type:none;

    }

    .hader ul li{font-size:15px;color:white;float:left;margin-left:20px;}

    

    .foot li{float:left;color:white;margin-left:50px;list-style-type:none;font-size:10px; }

    .foot ul{text-align:center;}

    

  </style>

</head>

<body>

  <div class="hader">

      <ul>

          <li>课程</li>

          <li>职业路径</li>

          <li>实战</li>

          <li>猿问</li>

          <li>手记</li>

      </ul>

  </div>

  <div class="centin">

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

          <li>网站首页</li>

          <li>企业合作</li>

          <li>人才招聘</li>

          <li>常见问题</li>

      </ul>

  </div>

</body>

</html>


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

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

1回答
Steve007 2019-03-21 14:33:57

同学,你好。页脚的内容不能居中显示是因为给了页脚的ul的宽度继承了外面盒子的宽度100%,致使盒子不能通过margin:0 auto居中,应该给页脚的ul盒子设置小于页面宽的宽度才能通过设置margin:0 auto来使页脚的盒子实现居中效果,从而让它里面的内容实现居中效果。如图:

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

祝学习愉快!


问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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