html - Bootstrap 的缩略图不居中

Question

<ul class="thumbnails">
    <li class="span4 offset2">
        <div class="thumbnail">
            <img src="/images/johndoe.jpg" />
            <h4 style="text-align: center;">John Doe</h4>
        </div>
    </li>
    <li class="span4">
        <div class="thumbnail">
            <img src="/images/johnsmith.jpg" />
            <h4 style="text-align: center;">John Smith</h4>
        </div>
    </li>
</ul>

逻辑上有12列，由.span*类分配。我有两个具有 .span4 类的缩略图。这意味着如果设备上有足够的宽度，它们可以并排显示。我希望这两个缩略图显示在中间。所以我将 .offset2 类添加到第一个，以便将它们移动 2 列。因此，它们应该位于中心，但它们仍然与左侧对齐。

我看到 .offset2 中的规则 margin-left: 180px; 被忽略了。因为 thumbnails > li 中有 margin-left: 20px; 覆盖了 .offset2 的规则。

我怎样才能摆脱这种冲突？

Answer 1

你可以试试这个

向 ul 添加了一个类

<ul class="thumbnails centerThumb"> 

CSS

.centerThumb .span4 {
  float: none;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
.centerThumb {
  text-align: center
}

检查这个demo