页脚我是用浮动去实现的,对UL标签用text-align:center无法居中,应该怎么实现居中

页脚我是用浮动去实现的,对UL标签用text-align:center无法居中,应该怎么实现居中

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

        *{

            margin:0;

            padding:0;

            

        }

        .body{position: relative;}

        

        .header{

            

            width:100%;

            height:100px;

            background-color:black;

          

            


            

            

        }

        .img1{

          width: 300px;

          float:left;

          top:0;

          height: 100px;


          cursor: pointer;


        }

        .nav{float: right;right:50px;margin-right: 40px;

            zoom: 1;}

        .nav li{font-family: "微软雅黑";color: white;

             list-style: none;

             float: left;

             font-size: 25px;

             margin-left: 50px;

             line-height: 100px;

             height: 100px;

           }


           .nav li a{color:white;text-decoration: none;}




       .footer{

            

            width:100%;

            height: 100px;

            background-color:black;

            

            }


      .link li a{color:white;text-decoration: none;font-size: 30px;font-family: "微软雅黑";}

      .footer li{width:200px;height:100px;float: left;line-height: 100px;}

      .link{width:100%;height:100px;list-style-type: none;margin-left: 0;text-align: center;}


      .banner{

        width: 100%;

        height: 500px;

        background-color:#add8e6;

        



      }

      


    /*此处写代码*/

  </style>

</head>

<body>

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

  <div class="header">

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

    <ul class="nav">

      <li><a href="#">课程</a></li>

      <li><a href="#">就业</a></li>

      <li><a href="#">实战</a></li>

      <li><a href="#">手记</a></li>

      <li><a href="#">问答</a></li>

    </ul>

  </div>

  <div class="banner">

      <div class="left"></div>

      <div class="right"></div>

  </div>

  <div class="footer">

    <ul class="link">

      <li><a href="#">网站首页</a></li>

      <li><a href="#">人才招聘</a></li>

      <li><a href="#">人才招聘</a></li>

      <li><a href="#">人才招聘</a></li>

      <li><a href="#">人才招聘</a></li>

    </ul>

  </div>

</body>

</html> 

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

正在回答

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

2回答

同学你好,

text-align属性针对文本对齐显示方式,可以用于文字,图片以及内联元素上,而li是块元素,所以设置text-align属性没有效果。

可以将li设置为内联元素,如下:

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

自己测试下,祝学习愉快!

  • weibo_我是LUFFCIER_0 提问者 #1
    但是我看别人的作业没用display,用的是浮动,那应该如何实现居中呢
    2019-09-07 15:52:43
好帮手慕星星 2019-09-07 16:47:06

那就需要给ul设置固定宽度,用margin实现居中显示了:

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

自己试一试。

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

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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