Twitter bootstrap: Centered Thumbnails

css, twitter-bootstrap

Solution

Simply overwrite the `float:left` property on the thumbnail `li`s and set them to `display:inline-block` and then set `text-align:center` on the parent `ul`, like so:

CSS

.thumbnails {
    text-align: center;
}
.thumbnails li {
    width: 150px;
    height: 100px;
    background: red;
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */
    display: inline-block;
    *display: inline; /* ie7 support */
    zoom: 1;
}

Demo: http://jsfiddle.net/thirtydot/5WvAL/21/

Problem

I have a list of thumbnails. They have fixed size. I would like that the number of thumbnail in a row change with the width of the windows. That's easy with Twitter Bootstrap: http://jsfiddle.net/charlesbourasseau/5WvAL/ The problem is, when the screen can accept like 4.5 Thumbnail, they are all align to the left and I get a gap on the right. I would like to know if there is a possibility that the thumbnails stay centered, so the gap to the left and to the right, always stay the same...

Original source