Multiple DIVs centeralized in a single row - css

Question

below is my code, the thumb Divs are starting from left but how can I make them centralized?
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>

Answer 1

There's not much point in floating the divs if you want to center them. Instead make them inline-block elements and use text-align:center on the parent:
.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;
}
<div class="thumbsPanel">
<div class="thumbs">
<a href="1.html">
<img src="1.jpg">
</a>
</div>
<div class="thumbs">
<a href="2.html">
<img src="2.jpg">
</a>
</div>
<div class="thumbs">
<a href="3.html">
<img src="3.jpg">
</a>
</div>
</div>

Answer 2

My favorite method is to add a text-align: center; to the parent element, then use display: inline-block; instead of float: left;
.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;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>

Answer 3

You can use inline-block to thumbs instead of float left like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
border:1px solid #000;
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
If you want to conserve your floating behavior you should add an container to your thumbs, also using float dont forget to clearfix the container like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbsWrap {
display: inline-block;
overflow: hidden;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbsWrap">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
</div>