Horizontally centering and spacing with css - css

Question

I want to produce an image gallery style page for a responsive web site.
Depending on device and orientation the page displays between 1 and 4 images horizontally.
How can I achieve this and ensure that:
The space between the images remains equal
Each row is centered on the page regardless of device,
orientation and the number of images.
I would appreciate any pointers, as I am new to this I may have overlooked the correct terminology while attempting to find the answer using the search feature.
Thanks for your time and consideration.
#verwrapper {
text-align:left;
width:100%;
margin-left: auto;
margin-right: auto;
padding-top:20px;
overflow: hidden;
background: none repeat scroll 0 0 #FFFFFF;
text-align:center; /* for IE */
}
.ver{
position:relative;
border-bottom:2px solid #686868;
width:200px;
height:310px;
background-color:#fff;
margin-bottom:20px;
margin:0 auto;
padding:0 0.5em;
overflow:hidden;
float:left;
}
.verbild{
position:relative;
height:200px;
width:200px;
float:left;
outline:2px solid #C0C0C0;
outline-offset: -2px;
}
<div id="verwrapper">
<div class="ver">
<div class="verbild"><img src="image1.jpg" width="200" height="200" /></div>
</div>
<div class="ver">
<div class="verbild"><img src="image2.jpg" width="200" height="200" /></div>
</div>
<div class="ver">
<div class="verbild"><img src="image3.jpg" width="200" height="200" /></div>
</div>
</div>
Nick

Answer 1

Use same padding for right & left side(em or %), use margin:0 auto. like that -
.test1{
margin:0 auto;
padding:0 0.5em;
}

Answer 2

Try this. Just change sizes as you need.
<div class="row">
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
</div>
<style>
.row {width: 500px; margin: 0 auto;}
.image {width: 25%; float: left;box-sizing: border-box; padding: 0 5px;}
.image img { width: 100%;}
</style>