1.我们都知道 “margin:0 auto”;这个样式可以让块元素水平居中,前提是在添加了“width:xxPX”,只有添加了宽度的块元素才能让“margin:0 auto”生效
2.我们也知道给父级添加“text-aligin:center;”,可以让“行内元素”的子级可以实现水平居中,但这仅限于“行内元素”
2.我们更清楚给父级添加“diplay:talbe;”,然后给他设置“text-algin:center;”同时给他的子级设置“display:table-row;”,便可以让他的子节点【包含行内元素和块元素】,
但我们必须知道,这个条件是“IE8~”
的确很无奈,恶心的各种兼容问题把自以为“已经可以了” “学会的东西可以应付了”的我们虐的体无完肤,
“IE7 you go die!”
接下来,贴代码,解决~IE7下,如何不定宽度居中:
demo1---->多个子级不定宽度居中
效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <title>无标题文档</title> <meta charset="utf-8"/> <style> .wrap{ clear:both; position:relative; left:50%; float:left; } .wrap div{ float:left; position:relative; left:-50%; display: block; border:1px solid #ddd; width:50px; height:50px; text-align: center; line-height: 50px; } .wrap>div+div{ margin-left:10px; } </style> </head> <body> <div class="wrap"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> </body> </html>
demo2---------单个子级不定宽度居中
代码:
<!DOCTYPE html> <html lang="en"> <head> <title>无标题文档</title> <meta charset="utf-8"/> <style> .wrap2{ position:relative; left:50%;float:left; } .wrap2>div{ left:-50%; position: relative; } </style> </head> <body> <div class="wrap2"> <div> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> <button>点击我</button> </div> </body> </html>
关键代码已经用红色字体标注:
只需要给父级别添加
position:relative; left:50%;float:left;
p给子级添加:
position:relative; left:-50%;float:left;
便可实现不定宽度居中
思路:
1.float:left;根据内容实际宽度进行缩进
2.先把父级设置为相对定位,并且相对他父级左偏移50%,然后再然每个子级相对父级往左偏拉回50%
这里有个小坑,先看W3C对position:relative的解释:
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
相对他自身进行偏移,我们开始学习css的时候也是这样理解的,因为设置了50%后,他原来的位置还是占位的,
容易产生一个疑惑:
left:50%?这里是相对他自己?例如最外层div的宽度为100px,那相对他自己left:岂不是为50px,那如何实现居中?
百分比的计算都是相对于当前元素的父级的,这里的demo的left:50% 等于(body的width)/2,
页就是最外层div相对他原来的位置偏移(body的width)/2
拓展:实现不定宽度居中的进度条
.不需要设置宽度
.原先中间的间隔宽度可以随意修改不破坏布局
HTML:
<div class="wrap"> <div class="div1"> <span>1</span><!-- --><i></i> </div> <div class="div2"> <span>1</span><!-- --><i></i> </div> <div class="div3"> <span>1</span><!-- --><i></i> </div> <div class="div4"> <span>1</span><!-- --><i></i> </div> <div class="div5"> <span>1</span> </div> </div>
CSS:
<style> .wrap,.wrap2{ clear:both; position:relative; left:50%; float:left; } .wrap div{ float:left; position:relative; left:-50%; display: block; height:50px; line-height: 50px; width:200px; } .wrap div+div{ margin-left:-20px; position: relative; } span{ width:40px; height:40px; position: relative; line-height: 40px; border:5px solid #0000FF; text-align: center; display: inline-block; background:cornflowerblue; border-radius: 50%; } i{ display: inline-block; position: relative; left:-10px; width:150px; height:20px; background:cornflowerblue; } .wrap div.div1{z-index:100;} .wrap div.div2{z-index:99;} .wrap div.div3{z-index:98;} .wrap div.div4{z-index:96;} .wrap div.div5{z-index:95;} </style>
红色字体是为了兼容IE7子节点Z-index无法覆盖父级Z-index的情况,可以给第一个div设置最大的Zindex 后面的递减