Stylesheets - How do I get the floated elements to be centred?

Author

How do I get the floated elements to be centred?

Alan Silver

2006-04-06, 7:08 pm

Hello,

If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.

Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user's browser window, etc.

What I would like though is to have the thumbnails centred within the
containing element. Now maybe I'm asking something stupid, after all, I
did float them to the left!! Is it possible to have them centred? What I
mean is that there would be the same amount of white space on the left
side of the leftmost image as there is on the right side of the
rightmost image. I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

Stan McCann

2006-04-06, 7:08 pm

Alan Silver <alan-silver@nospam.thanx.invalid> wrote in
news:PKTSZYDa7RNEFwzs@nospamthankyou.spam:
> What I would like though is to have the thumbnails centred within
> the containing element. Now maybe I'm asking something stupid, after

..container {text-align:center}

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU Alamogordo http://alamo.nmsu.edu/
Implementing http://blinkynet.net/comp/uip5.html

Alan Silver

2006-04-06, 7:08 pm

In article <Xns979D5D202B3B8stanmccann@216.234.192.142>, Stan McCann
<me@stanmccann.us> writes
>Alan Silver <alan-silver@nospam.thanx.invalid> wrote in
>news:PKTSZYDa7RNEFwzs@nospamthankyou.spam:
>
>.container {text-align:center}

Thanks, but if you look at the sample I posted, you will see that the
div with ID "main" already has this property set, and the thumbnails
still go from the left edge of the container. I tried adding the
property to the <ul> itself (ID of "thumblinks") but that didn't make
any difference.

Any other ideas? Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

Els

2006-04-06, 7:08 pm

Alan Silver wrote:

> Hello,
>
> If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
> simplified version of a page that could be used to display thumbnail
> images of various products.
>
> Now, due to the floating, the thumbnails go across the page until the
> line is full, then spill over on to the next line. This is exactly what
> I want, as it allows the display to use up the full available width,
> depending on the user's browser window, etc.
>
> What I would like though is to have the thumbnails centred within the
> containing element. Now maybe I'm asking something stupid, after all, I
> did float them to the left!! Is it possible to have them centred? What I
> mean is that there would be the same amount of white space on the left
> side of the leftmost image as there is on the right side of the
> rightmost image. I would also like the images on the last line (which
> will usually be fewer in number than on preceding lines) to be centred,
> rather than being over to the left. Is this possible?

Not while floating them.
In order to have them centered with text-align:center, they need to be
inline elements. But inline elements don't have widths. Have a look at
this page and see if it's an option for you:
http://locusmeus.com/test/thumbswit...nscentered.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Alan Silver

2006-04-06, 7:08 pm

In article <1p8ti0giyqomo$.ef2ijn0b6d97.dlg@40tude.net>, Els
<els.aNOSPAM@tiscali.nl> writes
<snip>
>
>Not while floating them.

Thought not!! Thanks for the clarification.

>In order to have them centered with text-align:center, they need to be
>inline elements. But inline elements don't have widths. Have a look at
>this page and see if it's an option for you:
>http://locusmeus.com/test/thumbswit...nscentered.html

Well, apart from making me feel old (it's a long time since I looked at
pictures like those - heavy metal means deuterium to me nowadays!!), it
is exactly the layout idea I want.

I tried to do this with my HTML, but failed miserably. I guess this is
because I am using <ul> and <li> for the thumbnails as this seemed more
like structured markup. The page you showed used tables for each
thumbnail, which I don't want to do. Any idea how I achieve the same
effect with <ul> and <li> instead?

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

Stephen Poley

2006-04-06, 7:08 pm

On Thu, 6 Apr 2006 14:59:54 +0100, Alan Silver
<alan-silver@nospam.thanx.invalid> wrote:

>If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
>simplified version of a page that could be used to display thumbnail
>images of various products.
>
>Now, due to the floating, the thumbnails go across the page until the
>line is full, then spill over on to the next line. This is exactly what
>I want, as it allows the display to use up the full available width,
>depending on the user's browser window, etc.
>
>What I would like though is to have the thumbnails centred within the
>containing element.

Does this help?

http://www.spartanicus.utvinternet....th_captions.htm

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Els

2006-04-06, 7:08 pm

Alan Silver wrote:

> In article <1p8ti0giyqomo$.ef2ijn0b6d97.dlg@40tude.net>, Els
> <els.aNOSPAM@tiscali.nl> writes
> <snip>
>
> Thought not!! Thanks for the clarification.
>
>
> Well, apart from making me feel old (it's a long time since I looked at
> pictures like those - heavy metal means deuterium to me nowadays!!), it
> is exactly the layout idea I want.

Okay, next example has no heavy metal ;-)

> I tried to do this with my HTML, but failed miserably. I guess this is
> because I am using <ul> and <li> for the thumbnails as this seemed more
> like structured markup. The page you showed used tables for each
> thumbnail, which I don't want to do. Any idea how I achieve the same
> effect with <ul> and <li> instead?

http://locusmeus.com/test/thumbswit...stcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

Drawback compared to using tables: you can't vertically center images
of different heights without setting explicit top margins on them.

> Thanks for the reply.

You're welcome :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Neredbojias

2006-04-06, 11:19 pm

To further the education of mankind, Els <els.aNOSPAM@tiscali.nl>
declaimed:

>
> http://locusmeus.com/test/thumbswit...stcentered.html
>
> Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
> hacked versions, sometimes acting differently, so better test it in an
> original version as well)

Anemone?

Clever, but what I don't understand is how you got away with putting block
elements (span.thumb{display:block;....) inside inline elements (li
{display:inline;}). The validator doesn't complain; it only harps about
inline-block (-which is probably a css2/css2.1 thing) and "lightgreen".

--
Neredbojias
Infinity can have limits.

Neredbojias

2006-04-06, 11:19 pm

To further the education of mankind, Stephen Poley
<sbpoleySpicedHamTrap@xs4all.nl> declaimed:

>
> Does this help?
>
> http://www.spartanicus.utvinternet....lery_with_capti
> ons.htm

That is probably the most erudite page on css I've ever seen. But how many
people could do that (-from scratch)? I doubt I could have.

--
Neredbojias
Infinity can have limits.

Els

2006-04-07, 3:47 am

Neredbojias wrote:

> To further the education of mankind, Els <els.aNOSPAM@tiscali.nl>
> declaimed:
>
>
> Anemone?

No idea - here's the full picture:
http://locusmeus.com/bp/camping2005-047.html

> Clever, but what I don't understand is how you got away with putting block
> elements (span.thumb{display:block;....) inside inline elements (li
> {display:inline;}).

That's never been a problem. You can't put block elements (div, p)
inside inline elements (span), but you can put inline elements (span)
inside block elements (li) and reverse the properties. The problem is
to make the browser do what you want with it though ;-)

> The validator doesn't complain; it only harps about
> inline-block (-which is probably a css2/css2.1 thing) and "lightgreen".

Yup - I should have used a colour number, but it was late and I was
lazy. I didn't actually check the validator...

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Freefall

Neredbojias

2006-04-07, 3:47 am

To further the education of mankind, Els <els.aNOSPAM@tiscali.nl>
declaimed:

>
> No idea - here's the full picture:
> http://locusmeus.com/bp/camping2005-047.html

-Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone...

>
> That's never been a problem. You can't put block elements (div, p)
> inside inline elements (span), but you can put inline elements (span)
> inside block elements (li) and reverse the properties. The problem is
> to make the browser do what you want with it though ;-)

I see. Missed that on my browse-through. Thanks for the clarification.

>
> Yup - I should have used a colour number, but it was late and I was
> lazy. I didn't actually check the validator...

Figured. Had a page up myself for a long time which used "gold" which I
stubbornly refused to change because I'm stubborn.

And, if I forgot to mention it before, nice job.

--
Neredbojias
Infinity can have limits.

Els

2006-04-07, 3:47 am

Neredbojias wrote:

>
> -Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone...

Like this one? :-)
http://locusmeus.com/dimage-z1/whatsit.html

>
> Figured. Had a page up myself for a long time which used "gold" which I
> stubbornly refused to change because I'm stubborn.

Gold, silver, orange .. they should just be part of legal CSS imo.

> And, if I forgot to mention it before, nice job.

Thanks :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Lady Fantasy (Bonus track)

Neredbojias

2006-04-07, 3:47 am

To further the education of mankind, Els <els.aNOSPAM@tiscali.nl>
declaimed:

>
> Like this one? :-)
> http://locusmeus.com/dimage-z1/whatsit.html

Yep, that's it, although I'm more familiar with the white ones. Maybe that
individual had a stomach ache.

>
> Gold, silver, orange .. they should just be part of legal CSS imo.

Of course. They added one (1) awhile back (-might be 'orange' but forgot)
but almost any even fairly common name should be defined.

>
>
> Thanks :-)
>

--
Neredbojias
Infinity can have limits.

Yukky Korpulent

2006-04-07, 6:45 pm

>> http://www.spartanicus.utvinternet....th_captions.htm

Pretty impressive.

kchayka

2006-04-07, 6:45 pm

Els wrote:
>
> you can't vertically center images
> of different heights without setting explicit top margins on them.

Sure you can, if you ignore IE. Set line-height to at least the height
of the tallest img, and vertical-align:middle

IE has a bug concerning line-height and replaced elements, so it will
align the images at top instead, but other browsers should center them
nicely.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Els

2006-04-07, 6:45 pm

kchayka wrote:

> Els wrote:
>
> Sure you can, if you ignore IE. Set line-height to at least the height
> of the tallest img, and vertical-align:middle

Yes, I know that trick, but for some reason it doesn't work in my
example. I've even tried it setting the line-height on all the
elements, setting explicit display:inline on the image, but alas - not
working. Maybe you can find what I'm missing?

> IE has a bug concerning line-height and replaced elements, so it will
> align the images at top instead, but other browsers should center them
> nicely.

That would be good enough for me - but I can't get it to work in this
particular construct :-(

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Alan Silver

2006-04-24, 6:54 pm

In article <x9ldpi6o2ymq.13jg9z19a7i1x.dlg@40tude.net>, Els
<els.aNOSPAM@tiscali.nl> writes
<snip>
>http://locusmeus.com/test/thumbswit...stcentered.html
>
>Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
>hacked versions, sometimes acting differently, so better test it in an
>original version as well)
<snip>

Sorry for the delay in replying, I've been off for just over a week
(holidays, new baby, etc) so have only just had chance to look at this.

That example was exactly what I wanted, thanks. I converted it to work
with <ul> instead of <p> without much problem. As my thumbnails are
inside links to other pages, I was able to remove the <span> elements
and use <a> instead, which resulted in neater code. You can see my
version at www.kidsinaction.org.uk/thumbs3.html

This now looks fine in IE5, IE6 and Opera 8.54, but has a couple of
small problems in FF 1.5.0.2, namely:-

1) The links appear to be vertically aligned at the bottom, not at the
top like in the other browsers. This is most noticeable on the one with
the longest caption text, where the image is higher than the others. Any
idea how to make them aligned to the top of the images, like IE and
Opera?

2) The vertical space between one caption and the top of the image below
it (when they use more than one line) is zero in FF, whereas it is as
expected in IE and Opera. I have set a top margin of 0.5em and a bottom
margin of 1em on the li element, so there should be something there, no?

Any ideas about these two?

My only other problem is that the validator complains about...

display: inline-block;

saying that "inline-block" isn't a valid value. According to the page
you linked, this is CSS2.1, and not CSS2. I don't know if this is the
problem though. Any idea how to get the CSS to validate?

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver

2006-04-27, 10:55 pm

Anyone any ideas about this?

In article <O0kEXvRQ0NTEFwht@nospamthankyou.spam>, Alan Silver
<alan-silver@nospam.thanx.invalid> writes
>In article <x9ldpi6o2ymq.13jg9z19a7i1x.dlg@40tude.net>, Els
><els.aNOSPAM@tiscali.nl> writes
><snip>
><snip>
>
>Sorry for the delay in replying, I've been off for just over a week
>(holidays, new baby, etc) so have only just had chance to look at this.
>
>That example was exactly what I wanted, thanks. I converted it to work
>with <ul> instead of <p> without much problem. As my thumbnails are
>inside links to other pages, I was able to remove the <span> elements
>and use <a> instead, which resulted in neater code. You can see my
>version at www.kidsinaction.org.uk/thumbs3.html
>
>This now looks fine in IE5, IE6 and Opera 8.54, but has a couple of
>small problems in FF 1.5.0.2, namely:-
>
>1) The links appear to be vertically aligned at the bottom, not at the
>top like in the other browsers. This is most noticeable on the one with
>the longest caption text, where the image is higher than the others.
>Any idea how to make them aligned to the top of the images, like IE and
>Opera?
>
>2) The vertical space between one caption and the top of the image
>below it (when they use more than one line) is zero in FF, whereas it
>is as expected in IE and Opera. I have set a top margin of 0.5em and a
>bottom margin of 1em on the li element, so there should be something
>there, no?
>
>Any ideas about these two?
>
>My only other problem is that the validator complains about...
>
>display: inline-block;
>
>saying that "inline-block" isn't a valid value. According to the page
>you linked, this is CSS2.1, and not CSS2. I don't know if this is the
>problem though. Any idea how to get the CSS to validate?
>
>Thanks for the reply.
>

--
Alan Silver
(anything added below this line is nothing to do with me)