Twitter Bootstrap/Unify center variable amount of images

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%;
}