如何使中间的div水平居中，元素之间左右浮动

Question

我想让下面的‘中间’div在中间吗？有什么想法吗？

<div style="height:200px; width:100%">
<div style="float:left">Left</div>
<div>Middle</div>
<div style="float:right">Right</div>
</div>

感谢

Answer 1

margin: 0 auto;就可以了。

Answer 2

如果你的宽度是定义的，你可以写这个：

.left{
    background:red;
    float:left;
}
.right{
    background:yellow;
    float:right;
}
.middle{
    background:green;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
}
.parent{
    text-align:center;
    height:100px;
}
.parent div{
    text-align:left;
}

检查这个http://jsfiddle.net/9cBrh/1/

Answer 3

在HTML中：

<div id="left">
    <p>Left Column</p>
</div>
<div id="right">
    <p>Right Column</p>
</div>
<div id="center">
    <p>Center Column</p>
</div>

​在你的CSS中：

div {background:#ff0;width: 200px;height: 500px;}
#right {float: right;}
#left {float: left;}
#center {background:#f00;margin: 0 auto;}​

这是一把小提琴：http://jsfiddle.net/ryancowles/YNWHe/

更新：您可以在<div id="wrap"> <!-- Use the Above Code !--> </div>中包装所有内容，并使用#wrap {width:100%;} 给包装div一个宽度