css - Float a bunch of divs CENTERED while retaining dynamic width and height -

i've got large div. contains bunch of thumbnails. i'd thumbnails within div centered inside div, , div centered on page. i'd width of div dynamic can see thumbnails on every resolution, centered. how achieve this?

here's have far:

<div id="container">     <div class="thumb"><img /></div>     <div class="thumb"><img /></div>     <div class="thumb"><img /></div>     <div class="thumb"><img /></div>     <div class="thumb"><img /></div>     <div class="thumb"><img /></div> </div> 

i've tried centering css: problem need alternative float:left works center float around each other. have floats them left on wrong browser width, they're not centered.

#container{margin:auto;width:80%} .thumb{padding:60px;float:left} 

any ideas on how float:center?

firstly, cannot give same id children <div>; invalid html.

i'd this:

#container{margin:0 auto;width:80%;text-align:center} #container div{padding:60px;display:inline}  <div id="container">     <div><img /></div>     <div><img /></div>     <div><img /></div>     <div><img /></div>     <div><img /></div>     <div><img /></div> </div> 

alternatively, change <div>s <span>s , remove display:inline css directive. remove <div> or <span> idea , apply padding directly img tag.

edit: seeing comments posted on answer, looks answer above still won't you. behavior you're trying accomplish? http://jsfiddle.net/9kqqn/1

#container{margin:0 auto;width:80%;text-align:center} #container span{display:inline-block;text-align:left}  <div id="container">     <span>         <img />         <img />         <img />         <br />         <img />     </span> </div>