user2989343 user2989343 - 7 months ago 13
HTML Question

Centering Thumbnails

i'm trying to center a group of fluid thumbnails, but they always align left instead of center.

here's the jsfiddle that shows the problem:

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

you may have to enlarge the output window to see the thumbnails side by side and observe the problem

<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

The simplest way is to use display: inline-block and text-align: center like so:

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

The initial trouble was Bootstrap adds .thumbnails li { float: left } which throws off the alignment. Adding float: none; to override fixed it right up.

Demo: http://jsfiddle.net/shshaw/bVa2Z/9/show/

Code: http://jsfiddle.net/shshaw/bVa2Z/9/

Comments