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>
    <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>
</ul>
</div>

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;
    }

or see:
http://jsfiddle.net/HvZva/4/

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