无法使缩略图居中

Posted 2023-03-29

【中文标题】无法使缩略图居中

【英文标题】：Can't manage to center thumbnails

【发布时间】：2012-12-07 07:26:47

【问题描述】：

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

【问题讨论】：

您在 Bootstrap 上尝试了哪些 CSS？

创建一个 js fiddle 你可能会更快得到答案

@MikeTedeschi：我已经在包装 div 上尝试了“margin: 0px auto”...没有运气。

@WebweaverD：是的，我知道，但实际上并不那么容易，因为使用了 Twitter Bootstrap，它有一个大约 6000 行的 CSS 文件。是的，这个特定的东西不需要所有的代码，但是很多东西都是在那个文件中传播的。

@holyredbeard 如果您在左侧加载 jquery，则可以选择为 twitter bootstarp 加载 js，然后您可以在添加资源下添加 css，只需使用这样的 cdn 链接：

【参考方案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 中并不总是有效。

【讨论】：

谢谢！由于大量 Twitter Bootstrap css，如果完全按照您编写的方式使用，您的代码将无法正常工作。但是，我将 ul 中的 "margin : 0px" 更改为 "margin: auto !important"，并且效果很好。

太棒了，如果有很多 css 需要覆盖，你需要高特异性，检查这个关于 css specifity 的链接。在引导程序之后放置新的 CSS 也会有所帮助。 coding.smashingmagazine.com/2007/07/27/…

【参考方案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>