Justify images CSS

Question

I want to justify 3 images, I have never done this before so I have no clue how to do it. Now I Googled a bit and found the property "justify", but I saw it only works for Text ( correct me if i'm wrong. )

But I tried the following.

HTML

        <ul>
            <li><img class="uspIconOntwerp" src="images/ontwerp-icon.png" /><div class="uspText">Ontwerp</div></li>
            <li><img class="uspIconRealisatie" src="images/realisatie-icon.png" /><div class="uspText">Realisatie</div></li>
            <li><img class="uspIconPrijs" src="images/prijs-icon.png" /><div class="uspText">Betaalbare prijs</div></li>
        </ul>

And my css

    ul
{
        text-align: justify;
}

But this doesn't work (ofcourse).

Does anyone have a clue how to do this?

And I just googled the title and found: [text-align: justify and images](http://stackoverflow.com/questions/1464934/text-align-justify-and-images). Not sure if it meets your needs though. — Hashem Qolami, Nov 04 '14 at 14:25
I want to justify images horizontally in the full with of my website — Thijs Kempers, Nov 04 '14 at 14:28
You mean something like that [fiddle](http://jsfiddle.net/AlexChariz/70zyqpL7/1/) ? — Alex Char, Nov 04 '14 at 14:32
I mean something like this. http://i.imgur.com/slH3qPh.png the images has to spread horizontally over the whole page. — Thijs Kempers, Nov 04 '14 at 14:39

score 3 · Accepted Answer · answered Nov 04 '14 at 14:43

To make justify property works as do in the alignment of texts you will need to make the li items inline-block elements. Try this:

ul {
  text-align: justify;
}
ul > li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

* {
  margin: 0;
  padding: 0
}
ul {
  background: red;
  padding: 40px;
  box-sizing: border-box;
  text-align: justify;
}
ul > li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul id="Grid">
  <li>
    <img class="uspIconOntwerp" src="images/ontwerp-icon.png" />
    <div class="uspText">Ontwerp</div>
  </li>
  <li>
    <img class="uspIconRealisatie" src="images/realisatie-icon.png" />
    <div class="uspText">Realisatie</div>
  </li>
  <li>
    <img class="uspIconPrijs" src="images/prijs-icon.png" />
    <div class="uspText">Betaalbare prijs</div>
  </li>
</ul>

Note that you will need that after pseudo-element in order to make that line of items work as an entire one not the last on some justified content.

@ThijsKempers why not? Recreate that example on jsfiddle please — DaniP, Nov 04 '14 at 14:49

Justify images CSS

1 Answers1