居中“左浮动”内容（文本对齐：居中；不起作用）

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/

here the usual code. I want to achieve the following:

so the aligned div goes center.

Answer 1

Text-align center will work if you use display:inline-block instead of using float

JSfiddle

CSs

#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

Try it...

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

Answer 4

your 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;
}