Centering a bunch of elements inside a div

[GoldenRatio1618]

I have a container div that has 15 img elements inside of it with float: left; The div that the container div sits in has a width that shrinks based on device viewport sizes. I am trying to figure out how to center the container div inside of its parent in a way that when it is at it full desktop view there are 3 row of 5 images in each row, but when the viewport size reduces to a tablet breakpoint it cuts it to 4 rows of 4 images in each row.

Any ideas, I can’t get the container div the images sit in centered in its parent div, nor can I get them breaking correctly. Here is the page:

http://www.plusen.com/dev/projects/index.php

[matt_sanford]

I do not see 15 images first off, secondly, Get rid of the divs .projectTiles. If you do that by itself it automatically goes to rows of five. To compensate for deleting the “projectTiles” make the margins for the pictures a little greater so it takes up as much real estate as it can . margin: 2px 10px 10px;

[matt_sanford]

I don’t see any reason to mess with your parent divs.

[GoldenRatio1618]

Thanks Matt, but I wanted to keep the margins at that exact width and just center the tiles in the container div. That was the challenge for me because I didn’t want to increase the space between tiles.

[matt_sanford]

Another option i just thought of would be to add classes to the first and last divs on each row and assigning them specific margin-left and margin-right values respectively. you get to keep the space in-between the “tiles” as close as you want, you just make the margins on the ends bigger.

[GoldenRatio1618]

Thanks Matt. I guess the other thing I should have mentioned is that I am trying to make this design as responsive as possible so that when the browser/viewport shrinks it adapts. The width of the contentwell is max-width: 1140px and should it shrink below that the page would adapt and shrink as well. Adding fixed margins creates issues when reducing browser sizes. Ugh, this is eating me.

[matt_sanford]

Well now i am perturbed by this issue. Here is my latest idea: .ContentWell{
padding:0;
}
.content{
text-align: center;
padding: 4%;
}
.projectTiles{
float: none;
}

[Darfuria]

Contain the images in a block element (like a div) and make them width 25%, float left. Then at a lower resolution make them width 33%, etc.

[Author]

Posts