Не удается центрировать миниатюры

Я использую Twitter Bootstrap в качестве фреймворка для своего приложения, а миниатюры-для отображения информации о различных продуктах (6 разделенных на две строки). Однако миниатюры выровнены по левому краю, и мне не удается их центрировать. Как это могло быть сделано?

Html: 

<div class="row span12">
    <ul class="thumbnails span12">
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 1
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 2
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 3
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 4
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 5
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 6
          </div>
        </li>
    </ul>
</div>

Вывод: 

     _____________________
    |                     |
    |  Products           |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    |                     |
    |_____________________|

Желаемый результат: 

     _____________________
    |                     |
    |  Products           |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |                     |
    |_____________________|
2 4
css twitter-bootstrap html-lists thumbnails

2 ответа:

Нужно установить Улс ширина равна 3 добавленных элементов, ширина, границы, поля и отступы. центрирования можно достичь, установив левое и правое поля в положение auto.

Смотрите демонстрацию http://jsbin.com/odojit/2/edit 

.thumbnails li {
  width:100px;
  list-style:none;
  float:left;
  height:100px;
  margin:10px;
    border:solid black 1px;

}
ul {
  padding:0px;margin:0px;}
.span12 {
  width:368px;
  border:red solid 1px;
  margin-left:auto;
  margin-right:auto;
}

Чтобы переопределить что-то вроде bootstrap, вам нужно иметь более высокую спецификацию css в Вашем новом коде, что означает более высокий приоритет.

Как правило:

Селектор идентификаторов стоит в 10 раз больше, чем селектор классов, что в 10 раз больше как селектор элементов.

#id div {code}

Переопределяет 

.class .class .class .class .class .class .class .class .class .class {css code}

Проверьте эту статью для получения более подробной информации:

Http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Таким образом, если bootstrap использует селектор ID, чтобы перезаписать его, вы можете использовать body #idselector, который даст ему спецификацию +1. !важно также работает, но не всегда работает в IE6.
4

Вы можете использовать это .........

.thumbnails li {
  width:100px;
  list-style:none;
  float:left;
  height:100px;
  margin:10px;
    border:solid black 1px;

}
ul {
  padding:{0px;

Маржа: 0px; } 

 <ul class="thumbnails">
        <li>
          <div class="thumbnail">
            Product 1
          </div>
        </li>
        <li>
          <div class="thumbnail">
            Product 2
          </div>
        </li>
        <li>
          <div class="thumbnail">
            Product 3
          </div>
        </li>
          <li>
          <div class="thumbnail">
            Product 4
          </div>
        </li>
        <li class="span3 producer">
          <div class="thumbnail">
            Product 5
          </div>
        </li>
          <li>
          <div class="thumbnail">
            Product 6
          </div>
        </li>
      </ul>
0