How to centre-align 'n' number of images, coming from database - php

Question

I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)

Answer 1

The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>

Answer 2

You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.

Answer 3

Make a div with text-align:center
Amand then make a div inside it with display:inline-block