Page 1 of 1

How do you line up images in div, centre aligned?

Posted: Fri Mar 28, 2014 4:33 am
by simonmlewis
I have a div, the same width as the large image above it.
The div is to display a selection of thumbnails to view the 'gallery' of images.

I need the images to line up, and tile. I'm doing three per row.
Trouble is, because of the width of the images, even if I add right margin to them to try and line the right one up to the right edge of the div (with the left one lined up left), it all goes wrong, but pushing the last image to the next line.

So:
a) is there a way to "justify" images in a div, so they just auto space out;
b) where you do float: right, and the DIV is set to text-align: left - can you text-align: center so they float: right, but start from the middle...??
So even if they don't quite match the right edge, they are vertically aligned to the image above?

Re: How do you line up images in div, centre aligned?

Posted: Fri Mar 28, 2014 3:45 pm
by Christopher
Are the thumbnails always the same size? If so then just float them left and set the margins. If they are different sizes then you are probably going to need to use Javascript to set the widths and margins.

Re: How do you line up images in div, centre aligned?

Posted: Sat Mar 29, 2014 3:06 am
by simonmlewis
Always same size, but even adding a margin pixel by pixel, won't ever get the right one lined up.
Can it not be done as I suggested?

Re: How do you line up images in div, centre aligned?

Posted: Sat Mar 29, 2014 12:09 pm
by Christopher
If the problem is the rightmost one wrapping then either increase the width of the containing div or have a different style for the end div that does not have margins.

Re: How do you line up images in div, centre aligned?

Posted: Mon Mar 31, 2014 3:03 am
by simonmlewis
But go back to my original question, as that would resolve this. It would make both sides even.

Re: How do you line up images in div, centre aligned?

Posted: Mon Mar 31, 2014 10:42 am
by Christopher
What do you mean "both sides even"? I am assuming that you want N smaller images to display evenly spaced below a larger image.

Re: How do you line up images in div, centre aligned?

Posted: Mon Mar 31, 2014 10:47 am
by simonmlewis
I don't think it's at all possible to light the right edge up, without creating odd spacing in between the others in the row of four.
Therefore, I thought if I centre aligned it, and adjusted the margins as best as I can, then it will at least be vertically aligned.

If you do Float: left;, it starts at the left and appears to the right of each one.
Can it "start" from the centre, so they are centered...?

Re: How do you line up images in div, centre aligned?

Posted: Mon Mar 31, 2014 11:10 am
by Christopher
It is possible to line the right edge up if its width is divisible by the widths of the spacings. Otherwise something will need to be a different spacing. But if you want them to flow then you will need to calculate the right sized to make it work.

Re: How do you line up images in div, centre aligned?

Posted: Tue Apr 01, 2014 10:19 am
by simonmlewis
Yes. I just did something like that.
Every third image, there is no right margin. And the other are set just so, and it lines up.
BUT - can you still not do a 'float' and it start from the middle, and as it would appears, it goes to the right but is centered?

Re: How do you line up images in div, centre aligned?

Posted: Tue Apr 01, 2014 11:21 am
by Christopher
simonmlewis wrote:BUT - can you still not do a 'float' and it start from the middle, and as it would appears, it goes to the right but is centered?
No straightforward way that I know of.

http://css-discuss.incutio.com/wiki/Cen ... ck_Element