 <p>My favorite method is to add a <code>text-align: center;</code> to the parent element, then use <code>display: inline-block;</code> instead of <code>float: left;</code></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.thumbsPanel { border: thin black dashed; width: 800px; height: 500px; margin: 0 auto; text-align: center; } .thumbs { display: inline-block; width: 100px; height: 100px; border: 0; margin: 0 1em 1em 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="thumbsPanel"&gt; &lt;div class="thumbs"&gt;&lt;a href="1.html"&gt;&lt;img src="1.jpg"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="thumbs"&gt;&lt;a href="2.html"&gt;&lt;img src="2.jpg"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="thumbs"&gt;&lt;a href="3.html"&gt;&lt;img src="3.jpg"&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>