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/

Twitter引导程序：中心缩略图

1 个答案: