居中縮略圖

Question

我正在嘗試集中一組流體縮略圖，但他們始終對齊左側而不是中心。

這裏是一個說明該問題的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> 

Answer 1

的最簡單的方法是使用display: inline-block和text-align: center像這樣：

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

初始麻煩的是自舉添加.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。