Dynamically change bootstrap to centre if less than 3 in a row - php

Question

Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.
Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?
<div class="container>
<div class="row">
<div class="col-md-4 image-1">
<img>
</div>
<div class="col-md-4 image-2">
<img>
</div>
<div class="col-md-4 image-3">
<img>
</div>
</div>
</div>

Answer 1

I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?
If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:
.centerRows>.row {
text-align: center;
}
.centerRows>.row>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:
$('.container>.row').each(function(){
if($(this).children().size() < 3) $(this).addClass('centerMe');
})
.centerMe {
text-align: center;
}
.centerMe>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>

Answer 2

IMHO you can't do this with css. It can be done
using JS. Something like this:
if($('.image-3').length === 0){
$('.row').find('div').RemoveClass('col-md-4');
$('.row').find('div').AddClass('col-md-6');
}
But if you'll add more statement to the algorithm, i mean
"if it will be only one div, or only 4(with one on next row)"
you'll have to get more complicated code.