CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6207

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

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

enter image description here

enter image description here

enter image description here

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

Upvotes: 0

Views: 51

Answers (4)

Paulie_D
Paulie_D

Reputation: 115240

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

Upvotes: 1

Chirag Sutariya
Chirag Sutariya

Reputation: 362

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

Upvotes: 0

Rumesh
Rumesh

Reputation: 339

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324710

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

Upvotes: 1

Related Questions