images & justify

[The Plankmeister]

Ello...

Is there a way to recreate the "text-align : justify" behaviour with images?
(add to wish list: "image-align : justify") I have a gallery page and would
like all the images to properly justify in their containing <div>. I'm
currently centering them, which looks ok, but if there is a method of faking
justify with CSS I'd love to hear it! :)

P.

[Eric Bohlman]

"The Plankmeister" <pl******************@hotmail.com> wrote in
news:3f***********************@dread11.news.tele.d k:

Is there a way to recreate the "text-align : justify" behaviour with
images? (add to wish list: "image-align : justify") I have a gallery
page and would like all the images to properly justify in their
containing <div>. I'm currently centering them, which looks ok, but if
there is a method of faking justify with CSS I'd love to hear it! :)

I'm not quite sure what it would mean to "justify" an image. Justifying
text means diddling with the character and word spacing in order to make
the lines come out equal width. In an image, all the "lines" are equal
width by definition. Are you really talking about justifying a
*collection* of images? Do you really mean "I want to pack as many images
as possible into one horizontal group"? That should be easily achievable.
Do you also want to adjust the spacing between the images in order to
create as rectangular a grid of images as possible? If so, I'm afraid that
's a rather tall order, though if all your images are the same width,
you've got a special case that should also be easily achievable, though it
would involve a fixed inter-image spacing.

[The Plankmeister]

> I'm not quite sure what it would mean to "justify" an image.

Exactly the same as justifying text. Just swap the words for images.

Justifying
text means diddling with the character and word spacing in order to make
the lines come out equal width. In an image, all the "lines" are equal
width by definition. Are you really talking about justifying a
*collection* of images? Do you really mean "I want to pack as many images
as possible into one horizontal group"?

Yeah... I basically have this:

<div class="thumbnails">
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
<img .... >
</div>

Where each image has different widths but the same height.

Then I have this:

div.thumbnails {
text-align : center;
}

Which makes the images 'wrap' to the line so they take up all available
space before continuing on the next line.

I want to achieve an effect whereby the first image on each line has its
left edge lined up against the left edge of the div, and the last image on
each line has its right hand edge lined up with the right hand edge of the
div, and the spacing on each seperate line is dynamic to accommodate the
differently sized images. I'm pretty sure that's a good description of
'justify' if you swap "image" for "word".

[Jonathan Snook]

"The Plankmeister" <pl******************@hotmail.com> wrote in message
news:3f***********************@dread11.news.tele.d k...

I'm not quite sure what it would mean to "justify" an image.

Exactly the same as justifying text. Just swap the words for images.

Well, I tried "text-align:justify" in IE6 with images and it worked just
like text. Howvever, if you look at text, you'll notice that the last line
of text is left aligned and not full justified. So while it does what it's
supposed to, it's probably not quite what you were hoping. Now, For IE5.5+
you do have a saviour: "text-align-last:justify". This will justify the last
line of text (or images).

Jonathan
--
http://www.snook.ca/

[Jane Withnolastname]

On Sat, 04 Oct 2003 02:17:22 GMT, "Jonathan Snook"
<go***************@snook.ca> wrote:

"The Plankmeister" <pl******************@hotmail.com> wrote in message
news:3f***********************@dread11.news.tele. dk...

> I'm not quite sure what it would mean to "justify" an image.

Exactly the same as justifying text. Just swap the words for images.

Well, I tried "text-align:justify" in IE6 with images and it worked just
like text. Howvever, if you look at text, you'll notice that the last line
of text is left aligned and not full justified. So while it does what it's
supposed to, it's probably not quite what you were hoping. Now, For IE5.5+
you do have a saviour: "text-align-last:justify". This will justify the last
line of text (or images).

Jonathan

I have a similar but completely different problem.
I have the same arrangement of thumbnails, placed back-to-back-to-back
so they wrap at whatever the user's resolution is.
But my images are all the same width, but a different height and I
would like to get them to line up along the horizontal middle rather
than the base, which is default. I tried putting align=absmiddle in
the img tag, which worked in IE but aligned the middle with the
baseline of the other images in Moz. Plus, it didn't validate under
Strict, so that went out the window.
Is there a way to "horizontally center" images that are wrapped in
this way?

(Apologies to Plankmeister for butting in on the original subject.)

[Jane Withnolastname]

On Sat, 04 Oct 2003 11:05:56 GMT, Jane Withnolastname
<Ja**********************@yahoo.com> wrote:

On Sat, 04 Oct 2003 02:17:22 GMT, "Jonathan Snook"
<go***************@snook.ca> wrote:

"The Plankmeister" <pl******************@hotmail.com> wrote in message
news:3f***********************@dread11.news.tele .dk...

> I'm not quite sure what it would mean to "justify" an image.

Exactly the same as justifying text. Just swap the words for images.

Well, I tried "text-align:justify" in IE6 with images and it worked just
like text. Howvever, if you look at text, you'll notice that the last line
of text is left aligned and not full justified. So while it does what it's
supposed to, it's probably not quite what you were hoping. Now, For IE5.5+
you do have a saviour: "text-align-last:justify". This will justify the last
line of text (or images).

Jonathan

I have a similar but completely different problem.
I have the same arrangement of thumbnails, placed back-to-back-to-back
so they wrap at whatever the user's resolution is.
But my images are all the same width, but a different height and I
would like to get them to line up along the horizontal middle rather
than the base, which is default. I tried putting align=absmiddle in
the img tag, which worked in IE but aligned the middle with the
baseline of the other images in Moz. Plus, it didn't validate under
Strict, so that went out the window.
Is there a way to "horizontally center" images that are wrapped in
this way?

(Apologies to Plankmeister for butting in on the original subject.)

Never mind! I just found the answer in another post:
vertical-align: middle
Duh.
BTW, to Plankmeister: I'm not really sure if I have a full grasp of
your question, but would you consider adding padding to your images to
make equal spacing? Make your body margins negative values to butt the
images up against the edge and use centering. Or maybe that won't
work. Just a thought. Thanks for starting the thread, anyway :)