CODEWITHSUNDEEP
htmlcentering
RChellz
RChellz

Reputation: 41

Center a group of div's in a div

Is it possible to center a group of divs in one div so it'll look like this?

http://oi49.tinypic.com/1yo2dh.jpg

I wonder if you can do it without using a table.

Right now I got this HTML:

<nav class="imagemenu">
    <div id="categories">
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>    
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>         
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
    </div>
</nav>

And this CSS:

.home-menu {
    width:780px;
    height: 340px;
    margin-top:10px;
    padding: 20px;
    background-color:#CCC;
}

#categories {
    width:740px;
    height:340px;
    margin:0 auto;
    background-color:#333;
}

.cata {
    width:150px;
    height:100px;
    margin-bottom: 20px;
    float:left;
    background-color:#FFF;
    opacity:0.5;
}
.cata {
    opacity:1.0;
}

Sizes are still depending but is there a possible option to easily center all the cata's in the categories div?

I tried some options like overflow and text-align:center from other related questions, and perhaps I used them wrong but they don't work.

Upvotes: 4

Views: 11007

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

You can add text-align:

#categories {
    […]
    text-align:center;
}

and display: inline-block and you have to remove the float from this CSS rule:

.cata{
    […]
    display:inline-block;
}

Demo

http://jsfiddle.net/EdHS9/

Upvotes: 16

Bart
Bart

Reputation: 17361

Yes it is possible.

All you need to do is make the div elements inline-block so they will respond to text-align:center like inline elements.

Here is a fiddle to demonstrate.

http://jsfiddle.net/

Upvotes: 1

Related Questions