How do you line up images in div, centre aligned?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
How do you line up images in div, centre aligned?
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?
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: How do you line up images in div, centre aligned?
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.
(#10850)
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you line up images in div, centre aligned?
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?
Can it not be done as I suggested?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: How do you line up images in div, centre aligned?
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.
(#10850)
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you line up images in div, centre aligned?
But go back to my original question, as that would resolve this. It would make both sides even.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: How do you line up images in div, centre aligned?
What do you mean "both sides even"? I am assuming that you want N smaller images to display evenly spaced below a larger image.
(#10850)
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you line up images in div, centre aligned?
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...?
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...?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: How do you line up images in div, centre aligned?
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.
(#10850)
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you line up images in div, centre aligned?
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?
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: How do you line up images in div, centre aligned?
No straightforward way that I know of.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?
http://css-discuss.incutio.com/wiki/Cen ... ck_Element
(#10850)