text-align: justify and images

Question

I have a list of images (not in a list, but could be if that might solve the problem) that I want to fill the whole width of a div. I've tried the code at the bottom, and while it does justify any text in the p tag it doesn't do the same for images. How can I get it to evenly space the images across the full width of the div?

<div>
  <p>
    <img src="image1.png" alt="foo" />
    <img src="image2.png" alt="foo" />
    <img src="image3.png" alt="foo" />
    <img src="image4.png" alt="foo" />
    <img src="image5.png" alt="foo" />
  </p>
</div>

My CSS:

div { width: 30em; }
p { text-align: justify; }

Answer 1

study CSS more, text-align does not apply to any elements except inline text.

there is no way you can evenly distribute images without doing some math, basically start with float: left; and if you have e.g. 3 images in a row, you need to set a border with one third of percentages set for borders for each image. if you have four images, than divide by four.

Answer 2

In justified text, the last line of text in a paragraph is not expanded to fill the whole width. So to make the inline images spread out you need enough content to pull the paragraph out to two or more lines, eg.:

<div>
    <p>
        <img src="image1.png" alt="foo" />
        <img src="image2.png" alt="foo" />
        <img src="image3.png" alt="foo" />
        <img src="image4.png" alt="foo" />
        <img src="image5.png" alt="foo" />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
</div>

(or some other equally-ugly but less-visible version involving  .) This is a bit of a nasty hack.

Answer 3

This javascript will spread the images over the div from the middleand to the sides:

var container = document.getElementById("imageContainer");
var imageList = container.getElementsByTagName("img");

var totalWidth = container.offsetWidth;
var sliceWidth = totalWidth/imageList.length;

for( i = 0; i < imageList.length; i++)
{
  var totalMargin = sliceWidth - imageList[i].offsetWidth;
  var margin =  totalMargin / 2;

  imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px"
}

The script asume a couple of things;

1. There must be an ID of the div (imageContainer)
2. All the images must have the same width
3. For my convinience I only tested in IE7, there are things that I'm not sure about such as "offsetWidth" that may be different in Firefox etc. but this is mostly for you to get the concept of the script.

You could of course add support for variable image widths and so forth, but that wasn't really in the scope here.

This script will distribute the images evenly if you add or remove images, ofcourse to a limit. If the total width of the images is greater than the width of the div, there will be wrapping.

Hope it helps!