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?

Answer 1

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.