一开始我一直在想玩什么wrap要加上float:left，不加会怎么样？然后尝试着不加float:left，结果发现如果不加就不会出现居中效果，会跟一开始一样文字在最左边。
后来反复试验，终于有点理解为什么要加上float:left，不过我自己不太能表达出来，简单来说，我个人理解就是： 如果不加float:left，因为div class="wrap"是块状元素，所以是独占一行的，文字后面延伸到浏览器最右侧，导致这个div class="wrap"里面的元素（指div class="wrap-center"）也是延伸到浏览器最右侧的，假设div class="wrap"的宽度是100，那么div class="wrap-center"的宽度也是100，所以前面所说的，在wrap里面用left:50%往右移动50%，然后又在wrap-center里面用left:-50%，因为wrap和wrap-center宽度是相等的，导致它们抵消了，所以最后不会出现任何居中效果。
然而，如果在wrap里面加了float:left，意思就是左浮动，根据前面第12章里面所说的浮动模型的特征，wrap是不能独占一行的，wrap如果加了左浮动，然后里面又嵌套有其他元素的话(这里指wrap-center)，第一个重点来了：wrap将会在“我们来学习一下这种方法。”这句话之后把wrap-center放进去，也就是说“我们来学习一下这种方法。”这句话后面不会出现可以一直延伸到浏览器最右侧的空白，而是出现了wrap-center。而且第二个重点也来了：就是wrap-center的宽度会跟wrap的宽度保持一致(当然这里是指wrap-center里面没有指定width而是保持默认的情况下)。
此时，假设“我们来学习一下这种方法。”这段话的长度为10，那么wrap-center的长度就是10，此时再在wrap-center里面用left:-50%，就是往左移动-50%，大家脑补一下，这个时候就实现了把这段文字居中的效果。到现在我们可以看到，之前是根据wrap的长度100移动了50%，后来是根据wrap-center，其实就是“我们来学习一下这种方法。”这段文字的长度移动了-50%。 这就是原理。
不知道大家看懂没，我是尽力了。。。源代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.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;}
/*下面是代码任务区*/
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
.wrap{
float:left;
background:red;
position:relative;
left:50%;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<br>
<!--下面是代码任务区-->
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦