如何使中间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

如果您的div具有固定宽度，

margin: 0 auto;应该可以解决问题。

Answer 2

在您的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>中，并使包装div的宽度为#wrap {width:100%;}

Answer 3

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

.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/