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

Because no one mention in the previous answers. Nowadays (2017) and for awhile ago you can use CSS3 flexbox, by applying the property justify-content:space-between

div {
  display: flex;
  justify-content: space-between
}

<div>
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
</div>

Answer 2

The simplest way to make it is :

.justify-image{ text-align: justify;}
.justify-image img{display:inline-block;}
.justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}

<p class="justify-image">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">

</p>

1. You need a container with text-align:justify; (a <p> paragraph in this case.)
2. Your images need to be display:inline-block; else they will not interact as "text" (in justify text last line is not affected you need to add one to make it works.)
3. You need a line of "text" under your images for justifying to apply, with pseudo-element you can achieve it easily by creating a *:after.

*:after :
Don't forget content:"";. Without it, it will not appear. In my example I've used an inline-block with width:100%. It will always break the line after the content in my paragraph.

Happy coding ! :)

Answer 3

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.