Div在设置了浮动的情况下水平居中
自己布局的时候发现在设置了div为浮动后再去添加margin：auto属性是无效的； eg1： 首先简单布局一下，在body里面添加两个div，一个父div(div_box),一个子div (div1)，div1设置浮动并且设置margin：auto代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_box {
margin: 0 auto;
border: 1px solid red;
width: 200px;
height: 200px;
}
.div1{
float:left;
margin: 0 auto;
border: 1px solid black;
width: 25%;
height: 10%;
}
</style>
</head><body>
<div class="div_box">
<div class="div1"></div>
</div>
</body>
</html>
eg2: 根据例子eg1，我们把浮动取消试试 代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_box {
margin: 0 auto;
border: 1px solid red;
width: 200px;
height: 200px;
}
.div1{
/* float:left;*/ /* 去除浮动*/
margin: 0 auto;
border: 1px solid black;
width: 25%;
height: 10%;
}
</style>
</head><body>
<div class="div_box">
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_box {
margin: 0 auto;
border: 1px solid red;
width: 200px;
height: 200px;
}
.div1{
/* float:left;*/ /* 去除浮动*/
margin: 0 auto;
border: 1px solid black;
width: 25%;
height: 10%;
}
</style>
</head><body>
<div class="div_box">
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.main {
margin: 0 auto;
border: 1px solid red;
width: 200px;
height: 200px;
}
.main2 {
position: relative;
margin: 0 auto;
border: 1px solid black;
width: 25%;
height: 10%;
}
.white {
float: left;
background: yellow;
width: 50%;
height: 100%;
}
.pink {
float: left;
background: pink;
width: 50%;
height: 100%；
}
</style>
</head>
<body>
<div class="main">
<div class="main2">
<div class="white">white</div>
<div class="pink">pink</div>
</div>
</div>
</body>
</html>
