CSS floating images in center - html

Question

So I have that html code with images+title:
<div class="container">
<div class="box"><img src="image1.jpg" class="thumb"><p>Title 1</p></div>
<div class="box"><img src="image2.jpg" class="thumb"><p>Title 2</p></div>
<div class="box"><img src="image3.jpg" class="thumb"><p>Title 3</p></div>
<div class="box"><img src="image4.jpg" class="thumb"><p>Title 4</p></div>
...
<div class="box"><img src="image49.jpg" class="thumb"><p>Title</p></div>
<div class="box"><img src="image50.jpg" class="thumb"><p>Title</p></div>
</div>
And css:
.container {
width:80%;
margin: 0 auto;
}
.box {
display:inline-block;
width:150px;
margin-right:5px;
float:left;
}
With that code I have more "white" space on right, I want to have these pictures in the center for different browser size without setting up width for container.
Is it possible with css?

Answer 1

add to your container class text-align: center; and remove float:left; from box class.

Answer 2

That's what you call a centered, widthless float.
#outer {
/* This is just so you can see that they're centered */
width: 400px;
border: 1px solid black;
overflow: hidden;
}
.centered {
position: relative;
float: left;
left: 50%;
/* This and below is just because I have them stacked */
height: 100px;
padding-bottom: 10px;
clear: left;
}
.centered div {
position: relative;
float: left;
left: -50%;
}
<div id="outer">
<div class="centered">
<div>
<img src="http://placehold.it/200x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/300x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
</div>
</div>
</div>