Distributing images evenly & horizontally in a Div via CSS

Question

I'm having a difficult time finding specific info for my case. I'd like to distribute 3 image thumbnails across a 940px div in order to line up with the rest of my content. So far, I've gotten the images to line up horizontally, but the spacing is off & everything is shifted left.

Here is my CSS:

#thumbs {      width: 940px;   margin-top:90px;   margin-left: auto;    margin-right: auto; } 

My HTML:

<div id="thumbs">   <a id="single_image" href="/dev/images/1.png">     <img src="/dev/images/thumb1.png" alt=""/>   </a>   <a id="single_image" href="/dev/images/2.png">     <img src="/dev/images/thumb2.png" alt=""/>   </a>   <a id="single_image" href="/dev/images/3.png">     <img src="/dev/images/thumb3.png" alt=""/>   </a> </div> 

Example Images

What I currently have:

What I'm trying to achieve:

Your help is much appreciated.

Answer 1

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>​ 

Answer 2

The answer is very simple, just use:

.container {     display: flex;     justify-content:space-between; } 

That's all!