Centre a container full of divs

Question

I've tried all sorts of combinations of margin : 0 auto, display, width etc and I can't get my container to centralise on the screen. I'm in the 'fiddle around until it works' stage but I've run out of ideas.

I have a container (a div), which contains 6 divs (could increase later), which each contain a pie-chart. I want the charts to align centrally and space themselves depending on how they can fit onto the screen. For example, if there's room for 3 wide, I'd want them 3 wide by 2 deep, but centralised horizontally. If there's only room for 1, then 1 wide by 6 deep, but still the one centralised horizontally.

They are sorting themselves correctly, e.g 3 x 2 or 2 x 3, but they're pushed up against the left edge and I can't work out how to centralise them.

My CSS (which doesn't work) at the mo is :

#container {
    margin : 0 auto;
    display : inline-block;
}

#chart {
    float : left;
}

Did you search SO for this? http://stackoverflow.com/search?q=center+div+containing+divs — Rob, Apr 29 '16 at 19:07
I did search SO, but the page you linked has one I hadn't read and a solution that works. #container { width: 100%; text-align: center; } #chart { display: inline-block; } — Farflame, Apr 29 '16 at 19:13
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — nicholaswmin, Apr 29 '16 at 19:19

score 1 · Answer 1 · answered Apr 29 '16 at 19:08

1

#container {
    text-align: center;
}

#chart {
    display: inline-block;
}

answered Apr 29 '16 at 19:08

kloddant

1,026
12
19

Thanks, seems to be the simplest solution and it works :) – Farflame Apr 29 '16 at 19:14

score 0 · Answer 2 · answered Apr 29 '16 at 19:04

0

Use

display: block;

instead of

display: inline-block;

answered Apr 29 '16 at 19:04

Cameron637

1,699
13
21

Centre a container full of divs

2 Answers2