Use the technique shown in my answer here: Fluid width with equally spaced DIVs
Here it is with your code: http://jsfiddle.net/thirtydot/JTcGZ/
CSS:
#thumbs {
width: 540px;
margin-top:90px;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
HTML:
<div id="thumbs">
<a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
<a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
<a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
<span class="stretch"></span>
</div>