CSS - center elements displayed with {display: table} - html

Question

I am trying to display several <div> tags (with <img /> tags inside them in a grid like fashion, where they are side by side until the end of the parent element, at which point the next <div> would wrap.
I have the code:
<div style="text-align:center; height: auto; ">
<div style="display: table; margin: auto">
<div style="width: 200px; height: 250px; float: left;">
<img src="image1.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image2.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image3.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image4.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image5.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image6.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image7.jpg" height="200" width="200" />
</div>
</div>
</div>
And the output is almost there. The <div> elements are wrapping as expected, but they do not center as expected.
My question is: what do I need to do to get this 'grid' of <div> elements to be centered, yet still displayed in a grid-like format?
I've seen a few other SO question pertaining to this, but none of them solve my issue - or rather they describe slightly different issues.

Answer 1

Floating the divs keeps them from centering... Instead, make your wrapper div text-align: center, and the divs inside as display: inline-block. No need for display:table
Like this: http://jsfiddle.net/ceL79/

Answer 2

See demo: http://jsfiddle.net/3C6kt/
HTML
<div class="center_wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
.center_wrap {
width:500px;
text-align:center;
}
.box {
width:100px; height:100px;
background:#999;
display:inline-block;
}
You can insert images inside div's then...