关于水平居中的问题
在水平居中的讲解中，“通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。”
同时设置float和position：relative，不会冲突吗？这样设置是为什么？float起什么作用？
山楂片大王
2017-03-04
2 回答
看代码先。
.container{ float:left;
position:relative;
left:50%}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;}
.container li{float:left;display:inline;margin-right:8px;}
先设置div向右浮动50%，这个50是指浏览器窗口的一般，原来div是在左上角的，现在来到浏览器窗口一半的位置。现在我们再来看ul的属性设置，外边距margin和内填充padding都为0，也就是说ul这个容器的是和div等宽的，而且因为内填充也是0，因此li也和ul等宽！还有一个重要的点，就是li被设置成了行内元素，所以123会在一行显示，而且整个容器的宽度就是123所占的宽度，也就是说div的宽度也是一样宽，然后这里继续看ul的属性设置，left：-50%，这里的相对定位是相对div的左边框来说的，这个时候ul带着li里面的123向左移动-50%，因为ul和div的宽度一样，所以这就实现了123居中的效果！
举报
0/150
提交
取消
