Center inline block images

I need some help centering some images

HTML:

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<br>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>

CSS:

ul.thumbs {
    clear: both;
    padding-left: 0px;
}

ul.thumbs li {
    display: inline-block;
    /*float: left;*/
    padding: 0;
    margin: 5px 10px 5px 0;
    list-style: none;
}

a.thumb {
    padding: 2px;
    display: block;
    border: 1px solid #ccc;
}

ul.thumbs li.selected a.thumb {
    background: #DAA12F;
}

a.thumb:focus {
    outline: none;
}

ul.thumbs img {
    border: none;
    display: block;
    height: 120px;
    width: 120px;
    margin: 0px auto;
}

I need the images be centered together so that they remained lined up. Ive tried using:

ul.thumbs {
    text-align:center;
} 

but since there are a different number of images on each row, they move out of alignment

Thanks for the help, this is driving me crazy

EDIT: I thought I found a solution using this as a guide: http://www.tightcss.com/centering/center_variable_width.htm but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here http://jsfiddle.net/HvZva/26/)