Twitter引导：中心缩略图 [英] Twitter bootstrap: Centered Thumbnails

问题描述

我有一个缩略图列表。他们有固定的大小。

I have a list of thumbnails. They have fixed size. I would like that the number of thumbnail in a row change with the width of the windows.

这很容易与Twitter Bootstrap： http://jsfiddle.net/charlesbourasseau/5WvAL/

That's easy with Twitter Bootstrap: http://jsfiddle.net/charlesbourasseau/5WvAL/

问题是，屏幕可以接受像4.5缩略图，它们都对齐到左边，我在右边有一个差距。

The problem is, when the screen can accept like 4.5 Thumbnail, they are all align to the left and I get a gap on the right.

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

I would like to know if there is a possibility that the thumbnails stay centered, so the gap to the left and to the right, always stay the same...

推荐答案

缩略图 li 上的 float：left 属性，并将它们设置为 display：inline-块，然后在父 ul 上设置 text-align：center ，如下：

Simply overwrite the float:left property on the thumbnail lis and set them to display:inline-block and then set text-align:center on the parent ul, like so:

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引导：中心缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！