Question

我在页面的两侧有两个div对齐，我现在想要它们之间的div在中心对齐。

这是一个FIDDLE我想要Blue Div的中心。

HTML：

<div class="lateral_div" style="float: left"></div>
<div class="center_div" ></div>
<div class="lateral_div" style="float: right"></div>

CSS：

.lateral_div {
    width: 80px;
    height: 100px;
    background-color: red;
    margin: 0 10px;
}

.center_div {
    width: 200px;
    height: 160px;
    background-color: blue;
    float: left;
}

Answer 1

您需要将text-align:center添加到body（或其他父元素）以使内嵌元素居中，然后取消居中的div并将其display:inline-block

Demo Fiddle

修改CSS

body {
    text-align:center;
}
.lateral_div {
    width: 80px;
    height: 100px;
    background-color: red;
    margin: 0 10px;
}
.center_div {
    width: 200px;
    height: 160px;
    background-color: blue;
    display:inline-block;
}

Answer 2

您需要将标记更改为：

<div class="lateral_div" style="float: left"></div>
<div class="lateral_div" style="float: right"></div>
<div class="center_div"></div>

然后不浮动中间元素，并应用margin: 0 auto：

.center_div {
  width: 200px;
  height: 160px;
  margin: 0 auto;
  background-color: blue;
}

演示：http://jsfiddle.net/nxHet/3

Answer 3

将所有div放在另一个div中并使用css样式属性 display：inline-block; 它将解决您的问题

<强> HTML：

<div id="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>

<强> CSS：

#container{
 width:100%;
 text-align:center;
}
#left{
 float:left;
 width:100px;
}
#right{
 float:right;
 width:100px;
}
#center{
 margin:0 auto;
 width:100px;
 display: inline-block;
}

祝你好运。

Answer 4

使用margin : 0 auto作为中心div

其他两个div之间的中心div

4 个答案:

Demo Fiddle