Twitter bootstrap: Centered Thumbnails

Question

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

Thanks, but that's not the solution: http://jsfiddle.net/5WvAL/7/ — Charles, Jun 20 '12 at 13:16

score 7 · Accepted Answer · edited Jun 20 '12 at 13:31

7

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/

edited Jun 20 '12 at 13:31

thirtydot

224,678
48
389
349

answered Jun 20 '12 at 13:19

Andres I Perez

75,075
21
157
138

kinda works, but note this won't be exactly centred because of the left margin on spans – Damon Dec 04 '12 at 21:54

Twitter bootstrap: Centered Thumbnails

1 Answers1

Linked