CODEWITHSUNDEEP
csstwitter-bootstrap
Charles
Charles

Reputation: 11778

Twitter bootstrap: Centered Thumbnails

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...

Upvotes: 3

Views: 5359

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75389

Simply overwrite the float:left property on the thumbnail lis 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/

Upvotes: 7

Related Questions