美文网首页
一列水平居中

一列水平居中

作者: BubbleM | 来源:发表于2018-01-07 15:17 被阅读16次
    1. margin: 0 auto;一列水平居中
    <div class="one-column-horizontal-center-1"></div>
    .one-column-horizontal-center-1{
        background:#ccc;
        height:50px;
        margin:0 auto; /* core */
        width:200px;
    }
    
    • 该元素一定不能浮动,否则无效。
    • 内联块元素和内联元素设置居中要变成块元素才能使用margin:0 auto;
    • margin:0 auto; 是让div居中的,不是让文字居中的。
    1. 父级设置text-align: center;,子元素设置display:inline-block;
    • text-align属性可以有效作用于inline/inline-block水平的元素,对块级元素不起作用
    <div class="one-column-horizontal-center-2-wrap">
        <div class="one-column-horizontal-center-2"></div>
        <div class="one-column-horizontal-center-2"></div>
    </div>
    .one-column-horizontal-center-2-wrap{
        font-size:0; 
        text-align:center; /* core*/
    }
    .one-column-horizontal-center-2{
        background:red;
        display:inline-block; /* core*/
        height:50px;
        width:200px;
    }
    

    这里添加font-size:0;主要是为了解决inline-block引发的一个Bug.如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。真正的inline-block元素,就像个图片一样。例如,两个不在一行的div标签,形成的两个元素之间就会有间隙,如下图所示:

    inline-block引入的空格
    添加font-size:0;空格符本质上就是个字符,与a,b,c,d这些字符是个同一个属性的东西,只是他是空格,透明的看不见而已(但可以选中)。所以,只要我们使用让文字宽度为0的那些方法,不就可以解决inline-block元素间换行符间隙的问题啦!
    Bug解除后

    3.float+relative+helper+left50%+right50%

    <div class="main">
      <div class="parent">
        <div class="div01"></div>
      </div>
    </div>
    .main{
        overflow: hidden;
    }
    .parent{
        float: left;
        left: 50%;
        position: relative;
    }
    .div01{
        position:relative;
        right:50%;
        background:red;
        height:50px;
        width:200px;
    }
    

    需要注意浮动元素的宽度是由它的内容决定的。

    1. relative(absolute)+left50%+负margin
    <div class="main"></div>
    .main{
        position:relative;
        left:50%;
        margin-left: -25px;
        background:red;
        height:50px;
        width:50px;
    }
    

    这里position:relative;left:50%;会让元素的最左边缘处于父元素的中间位置,margin-left: -25px;移动元素宽度的一半,让整个元素位于中间位置。
    缺陷:这种方式需要已知宽度。

    1. -webkit-box-orient+-webkit-box-pack+-webkit-box
    <div class="main">
      <div class="div01"></div>
    </div>
    .main{
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        display: -webkit-box;
    }
    .div01{
        background:red;
        height:50px;
        width:50px;
    }
    
    1. -webkit-fit-content
    <div class="main">
      <div class="div01"></div>
    </div>
    .main{
        margin: 0 auto;
        width:-webkit-fit-content; /* core*/    
    }
    .div01{
        background:red;
        height:50px;
        width:50px;
    }
    

    margin:0 auto;控制父元素居中,width:-webkit-fit-content;控制元素内部做自适应。

    相关文章

      网友评论

          本文标题:一列水平居中

          本文链接:https://www.haomeiwen.com/subject/pxxdnxtx.html