3

我有一个缩略图列表。他们有固定的大小。我希望连续缩略图的数量随着窗口的宽度而变化。

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

问题是，当屏幕可以接受 4.5 缩略图时，它们都向左对齐，而我在右侧有一个间隙。

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

4

1 回答 1

7

只需覆盖float:leftthumbnail 上的属性li并将它们设置为display:inline-block然后text-align:center在 parent 上设置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/

于 2012-06-20T13:19:10.993 回答