css - 水平居中对齐缩略图

Question

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

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

有什么简单的解决办法吗？

Answer 1

Twitter bootstrap 缩略图默认 float 到左侧，您必须在自己的样式表上覆盖该行为，以使其容器与 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 类替换为您希望将图像居中的容器。