水平对齐中心的缩略图

以下是我在使用twitter-bootstrap的HTML中使用的代码。我想中心对齐输出，但无论我做什么，图像都是左对齐的。水平对齐中心的缩略图

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

任何简单的解决方案？

来源

2012-04-11 Sushil

'的text-align：center'在' li' – powerbuoy 2012-04-11 09:57:40

已经试过了，没效果！ ;（ – Sushil 2012-04-11 09:59:58

除非'li's是'display：inline'或'img's'' display：block' that should work。您能显示网站/代码吗？ – powerbuoy 2012-04-11 10:01: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 */ 
}

这样的thumbail图像将在.thumbnails容器内的中心。与要居中你的图片在容器更换.thumbnail类

来源

2012-04-11 12:50:05

Woah woah woah，这是我生命中第一次在CSS中看到>语法。这是什么意思？ – 2012-09-13 21:56:07

@Leonnears它被称为[子选择器]（http://www.w3.org/TR/CSS2/selector.html#child-selectors），用于仅选择元素的所有子元素，而不是全部匹配内的元素。在这种情况下，它用于选择“.thumbnails”容器的第一级（子）列表项。 – 2012-09-13 22:33:15

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

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

来源

2012-04-11 10:37:45 markvandencorput

我发现这个工作最简单的引导：

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

我只是从“左”“右”

改“浮动”

来源

2012-05-03 22:12:46 jstreebin

我发现这个作品： – jstreebin 2012-05-03 22:31:45

为图像创建一个新行。使用适当根据您的图像如尺寸偏差：

<div class="span8 offset2" >

来源

2012-06-14 05:38:54 Eric

这很简单只需要添加：

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

希望这是有帮助的

来源

2016-05-17 06:57:27 jfindley

水平对齐中心的缩略图

回答

相关问题