How do I get the floated elements to be centred?

kchayka wrote:

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

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/

In article <x9ldpi6o2ymq.13jg9z19a7i1x.dlg (AT) 40tude (DOT) net>, Els
<els.aNOSPAM (AT) tiscali (DOT) nl> writes
<snip>

http://locusmeus.com/test/thumbswith...tcentered.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)

Anyone any ideas about this?

In article <O0kEXvRQ0NTEFwht (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> writes

In article <x9ldpi6o2ymq.13jg9z19a7i1x.dlg (AT) 40tude (DOT) net>, Els
els.aNOSPAM (AT) tiscali (DOT) nl> writes
snip
http://locusmeus.com/test/thumbswith...tcentered.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)