为啥不在水平方向居中显示?

为啥不在水平方向居中显示?


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
*{margin: 0px;padding: 0}
.beijing{
    width: 1100px;
    height:100px;
    background-color:black;
    position: absolute;top:50%;left:50%
        margin:auto;
        margin-top:-50px;
    }
    .logo{text-decoration:underline;
          float:left;
          cursor:pointer;
    }
    .daohang ul{float: right;
                display: inline;
                color: #ffff;
                list-style: none;
                 }
                 .daohang ul li{float:left;
        height:100px;
        text-align:center;
        line-height:100px;
        margin:0 20px;
                        }
  </style>
</head>
<body>
    <div class="logo">
        <a href="/"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt=""></a>
    </div>
    <div class="daohang">
       <ul>
           <li>课程</li>
           <li>职业路径</li>
           <li>实战</li>
           <li>提问</li>
           <li>手机</li>
       </ul>
    </div>
</div>
</body>
</html>

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

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

1回答
妮可妮可妮_ 2018-07-20 10:10:49

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

请问同学是想实现哪里水平居中显示呢?

导航条在页面中水平方向居中显示思路:需要在子元素设置绝对定位,父元素设置相对定位,这样子元素才会相对于父元素的位置定位,给子元素设置宽高,例如left:50%,就要margin-left:回退一半的宽度,这样就能水平居中了

导航项在页面中水平方向居中显示行高=高度可以实现

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

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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