23 replies [Last post]
Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Hi all,

Does anyone know a trick to justify images? Say you have a page of a certain width and you have a number of images. How can you get the left image to stick to the left side of the page and the right one to the right side of the page and then have an even space between all images?

Anyone? Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 days 23 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Justifying images

By floating them Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Justifying images

Hmm not sure how you would use floats to do that?

If you float them all left the right most one will not stick to the right side, and floating them all right will not stick the left most to the left edge?

Do you have a set number of images or is it changable?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Justifying images

briski wrote:
Hmm not sure how you would use floats to do that?

Would not using auto margins do that?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

It seems that when I give the margin-left:auto; they take the whole width of the containing element as their margin (minus the width of the image). So the images will not show along side each other but all floating right above each other.

Float was also my first idea but after playing around I can't get it to work. Auto margin does not work on inline elements does it?

@briski. I'm looking for a general solution. So I want the width of the box, the images and the number f images to be of no interest to the solution.

binargs
Offline
Enthusiast
Last seen: 8 years 24 weeks ago
Timezone: GMT-4
Joined: 2005-07-21
Posts: 85
Points: 8

Justifying images

i am still a noob but will a list solve the problem?

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

how will alist solve the problem?

I also tried a table. But that is not the path I want to follow. And I don't see a solution i a list. Then you have li elements which you can float. But you already have img elements. So ...

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

And another funny thing. When you have an some images in a div they will listen to the style text-align:left or right. Aligning them left or right. Ahhh I thought, simple. text-align:justify; No way. Images will not respond to this style ...

Evil Evil Evil Ahhhhhhhhhh

thewilltolive
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 2
Points: 0

Justifying images

Brother,

I don't have an answer for you, but I feel your pain. Am I right, you want a group of images in a horizontal line centered in the middle? I have been wrestling with this one all week. I'm working on it, so if you crack it before me let me know. I got to the post googling, "justifying images", and if you say it doesn't work I guess it doesn't.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Justifying images

thewilltolive wrote:
Brother,

I don't have an answer for you, but I feel your pain. Am I right, you want a group of images in a horizontal line centered in the middle? I have been wrestling with this one all week. I'm working on it, so if you crack it before me let me know. I got to the post googling, "justifying images", and if you say it doesn't work I guess it doesn't.

Can you not just put all the images in a <div> which you center using margin: 0 auto; text-align center; and then float the images within the div left so they line up next to each other?

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

thewilltolive
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 2
Points: 0

Justifying images

This is one of those things I guess. I've really only been using css for a week. But I figured it out and I posted like 10 minutes ago. I put the images in a div and centered the text. I have a background image on top. So I set the margin-top to 200px.

www.tpeclan.com

bmeek
Offline
Enthusiast
Indiana
Last seen: 12 years 26 weeks ago
Indiana
Timezone: GMT-5
Joined: 2005-08-24
Posts: 64
Points: 0

Justifying images

<div style="margin: 0 auto;text-align:center;"><img src="image.jpg" alt="text" align="middle" width="192" height="150"></div>

This seems to work, at least it does In IE 6.0 and FF.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

Sorry I haven't looked at this for a while. But no I don't want to center a group of images. That is not that hard as you found out.

I want to justify them. Which is something different. I want multiple Images in a horizontal row to spread evenly across the width of the div with the most left aligned left and the most right aligned right. The space between the images should be evenly devided..

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Justifying images

Well, following on from bmeek's example, does putting the images inside an element with text-align:justify work?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Justifying images

Bertje, can you be more specific? Is the containing div fixed or fluid? Do the number of images change? How many images are there?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Justifying images

Try this;

      <div style="float: left; width: 24%; text-align: center;"><img src="bullseye.jpg"
alt="" /></div>

      <div style="float: left; width: 24%; text-align: center;"><img
src="bullseye.jpg" alt="" /></div>

      <div style="float: left; width:
24%; text-align: center;"><img src="bullseye.jpg" alt="" /></div>

      <div style="float: left;
width: 24%; text-align: center;"><img src="bullseye.jpg" alt="" /></div>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Justifying images

gary, that doesn't meet his criteria. He wants the left most image against the edge (where you have it centered in the float) and same for the right most.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Justifying images

Ah, I missed that. Sad

Maybe the specs should be changed to match the result. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

Well that's the thing Wolfcry, I'm looking for a generic solution. One that always works. I have an image here to make it more clear (hopefully): http://www.fabriekopzijnfrans.nl/css/justify.htm

Since we're talking generic solutions I want this to work given the width of the containg element (body, div, fixed, fluid, ...) is y, the number of pictures is n, the width of the pictures is unknown / variable, but the most left image should align with the left side of the containig element, the most right image with the right side and the space between all images should be equal, x.

This is actually what text-align:justify does to text. It spreads out the words evenly in the containing element, no matter how many words and the length of the words.

But the thing is text-align:center seems to work on images, text-align:justify does not.

So still no solution but I hope this will clear things up a bit. Thanks for reading and if you have a solution ...

bmeek
Offline
Enthusiast
Indiana
Last seen: 12 years 26 weeks ago
Indiana
Timezone: GMT-5
Joined: 2005-08-24
Posts: 64
Points: 0

Justifying images

Is this similar of what your looking for?

http://www.brianmeek.com/pics/michael.html

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Justifying images

Sorry no solution, but I wanted to say what a nice image you made

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

@wolfcry: Smile thanks, thats my job.

@bmeek: gonna look at your solution but thanks anyway for your reaction.

I keep you guys posted.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 40 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Justifying images

@ bmeek: No that is not realy what I'm looking for. Your left image is not aligned left and the right not right. All images are centered in a different containing element. There are some pretty examples of this approach (e.g. the Stop Design template: http://dbowman.com/photos/office/gallery/).

The example differs from your approach though. You use a table (not at all what I want to do) and center the image in a cell. But if the images vary in size the distance between the images will not be the same.

In the example above the use also a containing element (<li>) and ccenter the images in that. A bit the same. And then float them to the left.

So still no solution I guess.

edi
edi's picture
Offline
newbie
Last seen: 12 years 27 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Have you ever found a solution?

Hello Bertje,

have you ever found a solution for your problem. It would be nice to know because I would like to build my galery that way.

Cheers,
edi