Twitter Bootstrap/Unify center variable amount of images - html

Question

I want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3

Answer 1

Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}