Centering multiple side-by-side divs

Question

I am trying to make multiple divs, specifically five and center them all. I have used the display:inline-block to get them to be side by side but then when I use margin: 0 auto , the display:inline-block seems to get negated and then it's a vertical strip going down the page.

Below is my code:

 div { width: 50px; height: 300px; border-radius: 0; display: inline-block; } #red { background-color: red; } #orange { background-color: orange; } #yellow { background-color: yellow; } #green { background-color: green; } #blue { background-color: blue; } 

 <div class="container"> <div id="red"></div> <div id="orange"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> </div> 

I tried looking at the other relevant posts on SO but they don't do it with as many divs or they use static positioning which I don't want to use.

Can someone point me in the right direction?

Answer 1

This happens cause the width of the container is 50px. One quick solution is to set width of container to 100%:

 div { width: 50px; height: 300px; border-radius: 0; display: inline-block; } #red { background-color: red; } #orange { background-color: orange; } #yellow { background-color: yellow; } #green { background-color: green; } #blue { background-color: blue; } .container { width: 100%; } 

 <div class="container"> <div id="red"></div> <div id="orange"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> </div> 

You can align to center using text-align center to container:

 div { width: 50px; height: 300px; border-radius: 0; display: inline-block; } #red { background-color: red; } #orange { background-color: orange; } #yellow { background-color: yellow; } #green { background-color: green; } #blue { background-color: blue; } .container { width: 100%; text-align: center; } 

 <div class="container"> <div id="red"></div> <div id="orange"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> </div> 

To achieve both and vertical and horizontal align you can use position: absolute to the container top: 50% left: 50% and margin-top: -150px; /* Half the height */ margin-top: -150px; /* Half the height */ margin-left: -135px; /* Half the width */ margin-left: -135px; /* Half the width */ :

 div { width: 50px; height: 300px; border-radius: 0; display:inline-block; } #red { background-color: red; } #orange { background-color: orange; } #yellow { background-color: yellow; } #green { background-color: green; } #blue { background-color: blue; } .container { width: 270px; position: absolute; top: 50%; left:50%; margin-top: -150px; /* Half the height */ margin-left: -135px; /* Half the width */ } 

 <div class="container"> <div id="red"></div> <div id="orange"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> </div> 

Answer 2

You can set text-align: center on .container. Updated you code:

.container {
    width: 100%;
    text-align: center;
}

.container > div{
    width: 50px;
    height: 300px;
    border-radius: 0;
    display:inline-block;  
}

http://jsfiddle.net/jermund/wzdLrs0m/