中心“左浮动”内容（文本对齐：中心;不工作）

Question

#content
{
    background-color: red;
    text-align: center;
}

#content div
{
    float: left;
    background-color: green;
    padding: 10px;
    margin: 10px;
}

<div id="content">
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
    <div>AAAAA</div>
</div>
<div style="clear: both;"></div>

http://jsfiddle.net/nTLny/

这里是通常的代码。我想实现以下目标：

所以对齐的div成为中心。

Answer 1

如果您使用display:inline-block而非使用float

，

文字对齐中心将有效

<强> JSfiddle

<强>的CS

#content div
{
display: inline-block;
background-color: green;
padding: 10px;        
margin: 10px;
}

Answer 2

    #content div
{
    float: none;
    display:inline-block;
    background-color: green;
    padding: 10px;
    margin: 10px;
}

Answer 3

试试吧......

#content div {
    background-color: #008000;
    display: inline-block;
    margin: 10px;
    padding: 10px;
}

Answer 4

你的css：

#content{
background-color:white ;
text-align: center;
width:300px; /*giving it a width so it actually adjust to your sample image 300px seems to be close to yours*/
}

#content div
{
display: inline-block; /*second adjustment you need as "Abhineet" has mentioned*/
background-color: green;
padding: 10px;
margin: 10px;
}
#bottom {

float:right;
}