2-6编程练习页脚内容没有垂直居中显示

2-6编程练习页脚内容没有垂直居中显示

这是我得代码,请老师帮忙看一下,页脚内容并没有垂直居中显示,问题出在哪里?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    .header{

          width:100%;

          height:100px;

          background:black;

         }

    .div1{

          float: left;

          cursor: pointer;

         }

    .div2{

          width: auto;

          height: 100px;

          float: right;

          color: white;

          line-height: 100px;

          margin-left: 300px;

          text-align: center;

         }

    .div3{

          color: white;

          float: left;

          width: 100px;

          height: 100px;

          cursor: pointer;

         }

    .body{

          width: 100%;

          width: auto;

         }

    .footer{width:100%;

          height:80px;

          background:black;

          color: white;

          line-height: 80px;

          text-align: center;

          }

    .footer ul{width:auto;margin: 0 auto;}

    .footer li{list-style: none;float: left;margin-left: 80px;}

  </style>

</head>

<body>

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

  <div class="header">

      <div class="div1">

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

      </div>

      <div class="div2">

        <div class="div3">课程</div>

        <div class="div3">职业路径</div>

        <div class="div3">实战</div>

        <div class="div3">猿问</div>

        <div class="div3">手记</div>

      </div>

  </div>

  <div class="body">

    <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="footer">

   <ul>

      <li>网站首页</li>

      <li>网站首页</li>

      <li>网站首页</li>

      <li>网站首页</li>

      <li>网站首页</li>

      <li>网站首页</li>

    </ul>

  </div>

</body>

</html>


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

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

2回答
提问者 孤独患者01 2017-06-08 13:07:20

.footer ul{width:auto;

               margin: 0 auto;

               display: inline-block;

               text-align: center;}

    .footer li{list-style: none;

               display: inline;

               margin: 0;

               padding: 0 20px;

               float: left;}

老师,我最后是这么做的,从视觉上看也居中了,您看对吗?

  • 你好,方法不唯一,你的方法也可以,因为 .footer ul 设置了 display: inline-block; ,所以宽度与 li 符合。祝学习愉快。
    2017-06-08 18:40:39
小于飞飞 2017-06-08 10:56:26

你好,页脚是没有水平居中显示,原因  .footer ul{width:auto;margin: 0 auto;} 虽然使用margin 设置 ul 居中,但是 ul 中的 li 都浮动了,所以高度为0 , 同时 ul 是块级元素,所以充满整个父元素,所以居中无效,建议,给 ul 设置宽度,如下:

.footer ul {
        width:850px;
        margin: 0 auto;
        overflow: hidden;
}

 希望对你有帮助,祝学习愉快,欢迎采纳。

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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