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/

Answer 3

这很简单，只需添加：

<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>

希望这是有帮助的

Answer 4

我发现这对Bootstrap最简单：

.thumbnails > li {
  float: right;
  margin-bottom: 18px;
  margin-left: 20px;
}

我只是将“浮动”从“左”改为“右”

Answer 5

为图像创建一个新行。根据图像的大小使用适当的偏移量，例如：

<div class="span8 offset2" >

在中心水平对齐缩略图

5 个答案: