0

我正在尝试将一组流体缩略图居中，但它们总是左对齐而不是居中。

这是显示问题的jsfiddle：

http://jsfiddle.net/4040newb/bVa2Z/3/

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

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

2 回答 2

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/

于 2013-11-14T18:11:27.053 回答
0

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

您将需要以下 CSS：

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

您需要 CSS 将它们定位在中心。试试这个小提琴。

于 2013-11-14T18:11:02.133 回答