5

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

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

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

4

5 回答 5

18

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类替换为您想要将图像居中的容器。

于 2012-04-11T12:50:05.697 回答
5

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

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

于 2012-04-11T10:37:45.077 回答
1

这很简单，只需添加：

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

希望这有帮助

于 2016-05-17T06:57:27.547 回答
0

我发现这对 Bootstrap 最有效：

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

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

于 2012-05-03T22:12:46.767 回答
0

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

<div class="span8 offset2" >
于 2012-06-14T05:38:54.630 回答