Horizontally align thumbnails in center

alignment, css, thumbnails, twitter-bootstrap

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.

Problem

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?

Original source