CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6197

Center "left floated" content (text-align: center; wont work)

#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:

enter image description here

so the aligned div goes center.

Upvotes: 0

Views: 66

Answers (4)

user3237322
user3237322

Reputation: 21

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

Upvotes: 1

Abhineet
Abhineet

Reputation: 632

Try it...

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115135

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

Upvotes: 2

Terje
Terje

Reputation: 1763

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

Upvotes: 1

Related Questions