CODEWITHSUNDEEP
htmlcsstwitter-bootstrapthumbnailscentering
user2989343
user2989343

Reputation: 31

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>

Upvotes: 0

Views: 279

Answers (2)

shshaw
shshaw

Reputation: 3233

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/

Upvotes: 1

Pat
Pat

Reputation: 63

Your li's are block elements and therefore will fill the width of their container and not sit next to each other.

You'll need the following CSS:

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

You'll need CSS to position them in the centre. Try this fiddle.

Upvotes: 0

Related Questions