老师为什么我使用了center不能实现居中呢

老师为什么我使用了center不能实现居中呢

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{padding:0; margin:0;}
    .header{width:100%;height:100px;background:black;}
     li{float:left;color:white; margin:0 30px;display:block;text-align:center;line-height:40px;
              font-size:10px;}
    img{float:left;display:block;width:200px;height:100px;}
  </style>
</head>
<body>
 <div class="header">
   <ul class="logo">
    <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
     <li>课程</li>
     <li>职业路径</li>
     <li>实战</li>
     <li>猿问</li>
     <li>手记</li>
   </ul>
 </div> 
</body>
</html>

正在回答

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

5回答

垂直居中要是li的行高等于导航的整体高度。另外,这里li使用margin:0 30px;撑开的左右间距,因此li的左右间距本身就是相等的,不需要设置text-align:center;

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

另外,这个练习中,logo在左侧,导航在右侧,因此建议参考如下:

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

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

希望可以帮到你!

卡布琦诺 2019-05-11 17:23:13

li可以继承header的高度,但是li的行高line-height与header的height数值相等,才能实现垂直居中显示哦

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

希望可以帮到你!

提问者 慕仰8079247 2019-05-11 17:03:41

li不能继承header的高度吗,不是应该把高度设置为50px吗

提问者 慕仰8079247 2019-05-11 16:54:55

如果要居中的话可以用这个属性吗

提问者 慕仰8079247 2019-05-11 16:54:19

可以用text-align:center实现居中吗

  • 加入说你给li设置了固定宽度,想让文本内容在每个li内水平居中是可以使用text-align:center的
    2019-05-11 17:20:55
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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