Twitter引导程序:中心缩略图

Question

我有一个缩略图列表.它们有固定的尺寸.我希望连续缩略图的数量随窗口的宽度而变化.

使用Twitter Bootstrap很容易:http://jsfiddle.net/charlesbourasseau/5WvAL/

问题是,当屏幕可以接受4.5缩略图时,它们都对齐左边,我在右边有一个间隙.

我想知道缩略图是否有可能保持居中,因此左侧和右侧的间隙始终保持不变...

Answer 1

只需覆盖float:left缩略图上的属性li并将其设置为display:inline-block然后text-align:center在父级上设置ul,如下所示:

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;
}

演示:http://jsfiddle.net/thirtydot/5WvAL/21/