让浮动元素居中的几种方法
让浮动元素居中的几种方法
方法一：
给浮动元素外层包裹一个div,这个div和浮动元素宽度一致，然后对这个div设置margin: 0 auto;
-------html-------
-------css--------
.clearfix{ // IE清除浮动
*zoom: 1;
}
.clearfix::after { // 清除浮动
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.float-item{
border: 1px solid #000;
width: 50px;
height: 50px;
float: left;
width: 100px;
background-color: yellow;
}
.container-layout {
border: 1px solid #000;
width: 300px;
}
.content{
width: 100px; // 与浮动元素宽度一致
margin: 0 auto;
}
结果：
方法二：
-------html-------
-------css--------
// .clearfix样式同上
.container-layout {
border: 1px solid #000;
width: 300px;
}
.content{
float: left;
position: relative;
left: 50%; // 相对父元素宽度的50%，也就是150px，父元素为container-layout
}
.float-item{
position: relative;
float: left;
left: -50%; // 相对父元素宽度的50%,父元素为content
border: 1px solid #000;
background-color: yellow;
}
结果：
方法三：
-------html-------
-------css--------
// .clearfix样式同上
.container-layout {
border: 1px solid #000;
width: 300px;
}
.float-item{
position: relative;
float: left;
width: 100px;
height: 50px;
left: 50%; // 相对父元素宽度的50%,父元素为container-layout
margin-left: -50px;
border: 1px solid #000;
background-color: yellow;
}
结果：
第一、三方法的浮动元素需要有固定宽度，第二种方法不需要有固定宽度