3 images in a row centered in container

[Breakdown]

CSS\[code\].contain {max-width:960px;text-align:center;}.category {position:relative;display: inline-block;float:left;padding:10px;}.category2 {position:relative;display: inline-block;pading:10px;}.category3 {position:relative;display: inline-block;float:right;margin-right:50%;padding:10px;}\[/code\]HTML \[code\] <div align="center" class="category"> <img src="http://stackoverflow.com/questions/15867113/gemstoneshomebutton.png" /> </div> <div align="center" class="category2"> <img src="http://stackoverflow.com/questions/15867113/dichroichomebutton.png" /> </div> <div align="center" class="category3"> <img src="http://stackoverflow.com/questions/15867113/filigreehomebutton.png" /></div>\[/code\]i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div, and they don't align center and also the third image jumps down below the other two images.I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success.This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpganyand all help would be appreciated.