水平居中对齐缩略图答案

【问题标题】：Horizontally align thumbnails in center水平居中对齐缩略图
【发布时间】：2012-04-23 15:00:37
【问题描述】：

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

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

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

【问题讨论】：

text-align: center li
已经试过了，没有效果！ ;(
除非 lis 是 display: inline 或 imgs 是 display: block 应该可以工作。你能显示网站/代码吗？
@powerbuoy 是的，图像是 display: block。该网站目前处于离线状态，因此无法显示。但这里是萤火虫的前端代码截图.. freeimagehosting.net/um4qj
块元素可以通过将左右边距设置为auto来居中。或者您可以将它们更改为inline。

标签： css twitter-bootstrap thumbnails alignment

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

【讨论】：

哇哇哇，这是我有生以来第一次在 CSS 中看到 > 语法。这是什么意思？
@Leonnears 它被称为child selector，用于仅选择元素的所有子元素，而不是其中的所有匹配元素。在这种情况下，它用于选择.thumbnails容器的第一级（子）列表项。

【解决方案2】：

如果您使用 text-align: center; 并给您的 img display: inline-block; 它应该居中对齐。

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

【讨论】：

【解决方案3】：

这很简单，只需添加：

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

希望对你有帮助

【讨论】：

【解决方案4】：

我发现这对 Bootstrap 最有效：

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

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

【讨论】：

【解决方案5】：

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

<div class="span8 offset2" >

【讨论】：