Question

我试图将一组流体缩略图居中，但它们始终对齐而不是居中。

这是显示问题的jsfiddle：

您可能需要放大输出窗口以并排查看缩略图并观察问题

<div class="container-fluid">

  <div class="row-fluid">

        <ul class="thumbnails">

    <li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
</a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>

<li>
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
      <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
    </a>
    </li>


</ul>
</div>
</div>

Answer 1

最简单的方法是使用display: inline-block和text-align: center，如下所示：

.thumbnails { text-align: center; }
.thumbnails li { display: inline-block; margin: 0; float: none; }

最初的麻烦是Bootstrap添加.thumbnails li { float: left }，它会抛弃对齐。添加float: none;以覆盖修复它。

演示：http://jsfiddle.net/shshaw/bVa2Z/9/show/

代码：http://jsfiddle.net/shshaw/bVa2Z/9/

Answer 2

你的李是块元素，因此将填充其容器的宽度而不是彼此相邻。

您需要以下CSS：

.thumbnails {text-align: center; }
.thumbnails li {display: inline-block; margin:0 }

您需要使用CSS将它们放在中心位置。 Try this fiddle

中心缩略图

2 个答案: