-
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标签,形成的两个元素之间就会有间隙,如下图所示:
添加
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;
控制元素内部做自适应。
网友评论