css - 无法使缩略图居中

Question

我使用 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           |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |                     |
    |_____________________|

Answer 1

您需要将 uls 宽度设置为等于添加宽度 + 边框、边距和填充的 3 个元素。居中您可以通过将左右边距设置为自动来实现。

查看演示 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;
}

要覆盖诸如引导程序之类的东西，您需要在新代码中具有更高的 css 特异性，这意味着更高的优先级。

根据经验：

id 选择器的价值是类选择器的 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 特异性。!important 也有效，但在 IE6 中并不总是有效。

Answer 2

你可以用这个............

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