How to do this layout? (breaking to new line, centered) - html

Question

#container
{
text-align: center;
background-color: green;
}
.box
{
display: inline;
margin-left: 50px;
}
<div id="container">
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</div>
http://jsfiddle.net/VfKa4/
this is I have so far. I want to achieve this:
according to the number of blue box, only 3 may go to a line. The other goes to new line, but have to be centered. But I dont know how to do the margin, because no left-right margin is needed, still there has to be distances from each other

Answer 1

Add width:400px to your container (this will snugly fit three 100px images with 50px margins between them), and add the following rule:
.box:nth-child(3n+1) {margin-left:0}
Note also that to use display:inline-block, you cannot have any spaces between the elements, as this will mess up your layout.
Updated Fiddle

Answer 2

I think display:inline-block is what you are after.
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
text-align: center;
background-color: green;
font-size:0;
margin-bottom:10px;
}
.box
{
display: inline-block;
width:33%;
margin-bottom:10px;
}

Answer 3

.box{
margin: 0 auto;
}
This aligns items to the center. You can also set a margin value by changing the 0.
eg: margin: 20px auto;

Answer 4

<div id="container">
<center>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</center>
</div>