센터링 섬네일

Question

유체 섬네일의 그룹을 센터링하려고하지만 센터 대신 왼쪽 정렬됩니다.

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

귀하의 리튬의를 옆에 축소판 측면을 볼 수있는 출력 창을 확대하고 관찰 할 수 있습니다 : 여기

문제를 보여줍니다 jsfiddle입니다 요소를 차단하므로 컨테이너의 너비를 채우고 서로 옆에 앉지 않습니다.

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

당신은 중앙에 그 위치를 CSS가 필요합니다

는 다음과 같은 CSS가 필요합니다. Try this fiddle.