Twitter Bootstrap/Унифицируйте центр переменное количество изображений

Question

Я хочу, чтобы создать поле призыв к действию с центром содержания

Коробка содержит два ряда первая строка имеет название и вторую переменную величину изображений с максимум 12 (если больше, то это будет три или более строк).

Текст получается идеально по центру, используя .text-center. Однако я не могу создать div с шириной содержимого.

Что я есть сейчас:

<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> 

Я попробовал несколько установок, но не похоже, чтобы поместить col-md-9 в середине центр-блок. (хотя он действительно применяется margin: 0 auto;)

Что я могу сделать для создания изображений с одинаковой шириной в центре их контейнера с переменной суммой. Я использую Unify Template, который основан на Twitter Bootstrap 3

Answer 1

С text-center влияет на inline -уровневые элементы (только для детей), вы должны сделать их встроенными. Ясно. Так что вам нужно только сделать <div class="col-md-9 center-block"> inline. Сделать это:

.center-block { 
    display: inline-block; 
    float: none; 
} 

Если вы хотите, чтобы нажать не более 12 изображений в одной строке без JavaScript, я думаю, что это единственный способ:

.center-block img { 
    width: 8.2%; 
}