Annotate images with CSS
I want to justify 3 images, I've never done this before, so I have no idea how to do this. Now I searched a bit and found the "justify" property, but I saw that 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 that doesn't work (of course).
Does anyone know how to do this?
source to share
To create a property justify
, just like with text alignment, you will need to make li
items inline-block
. Try the following:
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 a pseudo-element after
for this line of elements to work as a whole, not the last one on some reasonable content.
source to share