title: Center inline block images
body: <p>I need some help centering some images</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="thumbs" class="navigation"&gt;
  &lt;ul class="thumbs noscript"&gt;
  &lt;li&gt;
      &lt;a class="thumb" href="#"&gt;
          &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="thumb" href="#"&gt;
          &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="thumb" href="#"&gt;
          &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;br&gt;
  &lt;li&gt;
      &lt;a class="thumb" href="#"&gt;
          &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="thumb" href="#"&gt;
          &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I need the images be centered together so that they remained lined up. Ive tried using:    </p>
  
  <pre><code>ul.thumbs {
      text-align:center;
  } 
  </code></pre>
  
  <p>but since there are a different number of images on each row, they move out of alignment</p>
  
  <p>Thanks for the help, this is driving me crazy</p>
  
  <p><strong>EDIT:</strong> I thought I found a solution using this as a guide: <a href="http://www.tightcss.com/centering/center_variable_width.htm" rel="nofollow">http://www.tightcss.com/centering/center_variable_width.htm</a> 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 <a href="http://jsfiddle.net/HvZva/26/" rel="nofollow">http://jsfiddle.net/HvZva/26/</a>)</p>