|
|
Posted by Ben C on 04/06/07 09:20
On 2007-04-06, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> I assume there is simply no good way to centre the mass of
> rectangles (shrink fit a wrapper and centre wrapper, left/right)
> here:
>
> http://tinyurl.com/ypnfc8
Right, because even where shrink-to-fit wrappers like display:
table-cell and display: inline-block are supported, the computed
shrink-to-fit width in that example works out to be the same as the
available width anyway.
In that example, the minimum width is about 102px (the width of the
longest float), the maximum width is the width of all the floats on one
"line" (something huge). The available width, the width of BODY, is
likely to be between those two values.
Basically shrink-to-fit only "shrinks" to anything when the maximum
width (width of everything on one line) is smaller than the available
width.
> If this is so, since they are reasonably fine uncentered anyway,
> a URL to suitable javascript "solution" would be appreciated - if
> there be such.
In an ideal world you'd do this by making each thumbnail an inline-block
instead of a float, and putting text-align: center on their container.
That would give just the effect you want, and might even work on IE
since Mr Korpela has said that inline-blocks with widths set on them
give it less of a problem than usual.
I'm assuming you need the thumbnails to be little block boxes in their
own right-- if you don't need captions or anything, just use inline img
elements and don't float them. Use text-align: center on the container
and it will all work much like inline-blocks even in FF.
The problem if you just use inline-block is that it will look positively
wrong in FF (I suspect each image on its own line). So you could use
float, then the JS could sniff out whether inline-block is supported and
then just go round changing everything to inline block, i.e.
node.style.float = "none";
node.style.display = "inline-block";
etc.
You can leave #wrapper as text-align: center from the start since it
won't affect the floats.
Then you'd default to the floats even if JS was turned off, which would
be OK since they don't look that bad. If JS was on, and the browser
supported it, then you'd get the centering.
Navigation:
[Reply to this message]
|