Center text above images
I have a question: how can I center the text above the appropriate image?
#container {
text-align: center;
}
.text {
display: inline-block;
margin: 0 20px 0 20px;
}
.img {
margin: 0 20px 0 20px;
width: 50px;
height: 50px;
}<div id="container">
<div class="text">100</div>
<div class="text">500</div>
<div class="text">1000</div>
<br>
<img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
<img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
<img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
</div>I've tried a lot of ways, but I couldn't get a good effect.
How it should look:
Make text same width as image
.text {
width: 50px;
}
JSFiddle Demo: https://jsfiddle.net/L3gcy3ek/1/