css - 推特 Bootstrap : Centered Thumbnails

Question

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

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

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

我想知道是否有可能缩略图保持居中，所以左边和右边的差距总是保持不变......

Answer 1

只需覆盖缩略图 li 上的 float:left 属性并将它们设置为 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/