Centering thumbnail gallery with captions without fixed image size

I've tried unsuccessfully to implement the layout in the attached image. When apllied div with table setting IE brokes, if elements are floated when captions are more than one line the layout is broken again. Any suggestion will be greatly appreciated.!

Layout image:

Here is the CSS

.thumbsHolder {clear:both;float:left;width:100%;overflow:hidden;}
.thumbsHolder ul#prodThumbs {padding-top:20px;margin:0 auto;list-style-type:none;text-align:center;}
.thumbsHolder ul#prodThumbs li {float:left;padding:0 7px;min-height:150px;}
.thumbsHolder ul#prodThumbs li a {font-family:Arial, Helvetica, sans-serif;font-weight:normal;text-decoration:none;font-size:70%;}

HTML

<div class="thumbsHolder">
<ul id="prodThumbs">
<li><a href="link1.htm"><img src="thumb1.jpg" /></a> <!-- image width and height may differ -->
<p><a href="link1.htm">Caption</a></p></li>
<li><a href="link2.htm"><img src="thumb2.jpg" /></a>
  <p><a href="link2.htm">Longer caption</a></p>
</li>
<li><a href="link3.htm"><img src="thumb3.jpg" /></a>
  <p><a href="link3.htm">Even longer caption</a></p>
</li>
<li><a href="link4.htm"><img src="thumb4.jpg" /></a>
  <p><a href="link4.htm">Longer caption</a></p>
</li>
<li><a href="link5.htm"><img src="thumb5.jpg" /></a>
  <p><a href="link5.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link6.htm"><img src="thumb6.jpg" /></a>
  <p><a href="link6.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link7.htm"><img src="thumb7.jpg" /></a>
  <p><a href="link7.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link8.htm"><img src="thumb8.jpg" /></a>
  <p><a href="link8.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link9.htm"><img src="thumb9.jpg" />&开发者_开发知识库lt;/a>
  <p><a href="link9.htm">Since we have a wider image at first row, this row must be centered</a></p>
</li>
<li><a href="link10.htm"><img src="thumb10.jpg" /></a>
  <p><a href="link10.htm">Longer caption</a></p>
</li>
<li><a href="link11.htm"><img src="thumb11.jpg" /></a>
  <p><a href="link11.htm">Here text also goes down, so if we float layout breaks</a></p>
</li>
<li><a href="link12.htm"><img src="thumb12.jpg" /></a>
  <p><a href="link12.htm">Caption</a></p>
</li>
<li><a href="link13.htm"><img src="thumb13.jpg" /></a>
  <p><a href="link13.htm">Longer caption</a></p>
</li>
<li><a href="link14.htm"><img src="thumb14.jpg" /></a>
  <p><a href="link14.htm">This is a centered image</a></p>
</li>
<li><a href="link15.htm"><img src="thumb15.jpg" /></a>
  <p><a href="link15.htm">This is out last image</a></p>
</li>
</ul>
</div>

---

You should know what the maximum size of a thumbnail will be when generated on your site, there must be some limit. Why not wrap your tag into a div set that divs height to the max of a thumbnail. Then align the img in the div. Then you have your p tag below for captions