在中心水平对齐缩略图

Question

以下是我在我的html中使用twitter-bootstrap的代码.我试图对齐输出,但无论我做什么,图像都是左对齐的.

<ul class="thumbnails"> 
   <li class="span5">
    <a href="#" class="thumbnail"><img src="img.jpg" /></a>
   </li>
</ul>

有什么简单的解决

Answer 1

Twitter的引导缩略图漂浮到默认情况下,左,你必须覆盖该行为对自己的样式表,以使他们中心对齐其容器与text-align:center和display:inline-block性质.试试这个:

CSS

.thumbnails {
    text-align:center;
}

.thumbnails > li {
    display: inline-block;
    *display:inline; /* ie7 fix */
    float: none; /* this is the part that makes it work */
}

这样,拇指尾图像将集中在.thumbnails容器内.将.thumbnail类替换为要使图像居中的容器.

Answer 2

如果你使用text-align: center;并给你img display: inline-block;它应该成为中心对齐。

见：http : //jsfiddle.net/HWMZg/