Justify images CSS [duplicate] - html

Question

This question already has answers here:
Fluid width with equally spaced DIVs
(7 answers)
Closed 8 years ago.
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.