Div在设置了浮动的情况下水平居中

最新推荐文章于 2022-06-12 10:33:55 发布

Cc_JoJo

最新推荐文章于 2022-06-12 10:33:55 发布

阅读量2.8w

点赞数 10

分类专栏： web前端文章标签：布局 html css

本文链接：https://blog.csdn.net/caohoucheng/article/details/72916700

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

自己布局的时候发现在设置了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>

效果图p1：
图P1

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>

效果图p2：
这里写图片描述
eg3：
从上面例子可以看出只要不设置浮动，div只要设置margin：auto就可以实现居中，那如果要让两个div并排并且都居中呢，先来试一下在添加一个

<!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>

效果图p3：由于没有设置浮动，div单占一行
这里写图片描述
eg4
要想实现水平居中，在div外嵌套一个居中div，然后再在居中的div里添加两个浮动的div

<!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>