css不定宽度居中

最新推荐文章于 2023-01-18 11:06:28 发布

陆康永

最新推荐文章于 2023-01-18 11:06:28 发布

阅读量1.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaomogg/article/details/49847315

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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>