Search code examples
csstwitter-bootstrapthumbnailsalignment

Horizontally align thumbnails in center

Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.

<ul class="thumbnails"> 
   <li class="span5">
    <a href="#" class="thumbnail"><img src="img.jpg" /></a>
   </li>
</ul>

Any simple solution?

Solution

  • Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:

    CSS

    .thumbnails {
    text-align:center;
}

.thumbnails > li {
    display: inline-block;
    *display:inline; /* ie7 fix */
    float: none; /* this is the part that makes it work */
}

    This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.