Twitter Bootstrap：居中缩略图

Question

我有一个缩略图列表，它们具有固定的大小。我希望每行中缩略图的数量能够随窗口宽度的变化而变化。

使用Twitter Bootstrap很容易实现: http://jsfiddle.net/charlesbourasseau/5WvAL/ 问题是，当屏幕可以显示4.5个缩略图时，它们都靠左对齐，右侧会出现空白。

我想知道是否有可能让缩略图保持居中，这样左右两侧的间隙始终保持相同...

- Charles

---

尝试将.thumbnail设置为display:inline-block和Margin:0 auto; - SVS

谢谢，但那不是解决方案：http://jsfiddle.net/5WvAL/7/ - Charles

Answer 1

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

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/

- Andres Ilich

---

有点可行，但请注意由于跨度的左边距，这不会完全居中。 - Damon