一列水平居中

2018-01-07 本文已影响16人 BubbleM

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居中的，不是让文字居中的。

父级设置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;
}

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

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;移动元素宽度的一半，让整个元素位于中间位置。
缺陷：这种方式需要已知宽度。

-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;
}

-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;控制元素内部做自适应。

一列水平居中

猜你喜欢

热点阅读