底部 ul 盒子为啥不会居中？设置了left:0;right:0;margin: auto;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.go ol{list-style:none;display:inline-block;padding-left:100px;}
.head{width:100%;height:100px;background:black;position:fixed;top:0;overflow:hidden;}
.go{float:right;color:white;margin:35px 100px;}
.img{float:left;width: 300px;height: 100px}
.img img{display: block;width: 100%;height: 100%}
.body{margin:100px 0;}
.body img{display: block;width:100%;}
/*图片是行级元素，要把他转换为块级元素才不会有缝隙。*/
.footer{width:100%;height:100px;background:black;position:fixed;bottom: 0}
/*.footergo{float:right;color:white;margin: 35px 22%;}*/
.footergo{float:right;color:white;left:0;right:0;margin: auto;}
.footergo ol{list-style:none;display:inline-block;padding-left:50px;padding-right:50px ;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="head">
<div class="img"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<ul class="go">
<ol>课程</ol>
<ol>职业路径</ol>
<ol>实战</ol>
<ol>猿问</ol>
<ol>手记</ol>
</ul>
</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 class="footergo">
<ol>课程</ol>
<ol>职业路径</ol>
<ol>实战</ol>
<ol>猿问</ol>
<ol>手记</ol>
</ul>
</div>
</body>
</html>
正在回答
同学你好，left:0;right:0;margin: auto;这几个属性设置居中，是要结合定位使用的哦。这里不没有定位，但是有右浮动，所以靠右边显示了。
建议：这里直接给ul添加内容居中即可，然后设置行高为100px，就可以实现垂直居中了。例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星