CSS 在中心水平对齐缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10103692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally align thumbnails in center
提问by Sushil
Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.
以下是我在带有 twitter-bootstrap 的 html 中使用的代码。我试图将输出居中对齐，但无论我做什么，图像都是左对齐的。
<ul class="thumbnails">
<li class="span5">
<a href="#" class="thumbnail"><img src="img.jpg" /></a>
</li>
</ul>
Any simple solution?
有什么简单的解决办法吗？
回答by Andres Ilich
Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:centerand display:inline-blockproperties. Try this:
默认情况下，Twitter 引导程序缩略图浮动到左侧，您必须在自己的样式表上覆盖该行为，以使它们居中对齐其容器与text-align:center和display:inline-block属性。尝试这个：
CSS
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
This way the thumbail images will center inside the .thumbnailscontainer. Replace the .thumbnailclass with the container you want to center your images in.
这样缩略图图像将在.thumbnails容器内居中。用.thumbnail您想要将图像居中的容器替换该类。
回答by markvandencorput
If you use text-align: center;and give your imgdisplay: inline-block;it should become center aligned.
如果你使用text-align: center;并给你imgdisplay: inline-block;它应该成为中心对齐。
回答by jfindley
This is simple just add:
这很简单，只需添加：
<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>
Hope this was helpful
希望这有帮助
回答by jstreebin
I found this works easiest for Bootstrap:
我发现这对 Bootstrap 最简单：
.thumbnails > li {
float: right;
margin-bottom: 18px;
margin-left: 20px;
}
I simply changed "float" from "left" to "right"
我只是将“浮动”从“左”改为“右”
回答by Eric
Create a new row for the image. Use the appropriate offset depending on the size of your image e.g.:
为图像创建一个新行。根据图像的大小使用适当的偏移量，例如：
<div class="span8 offset2" >
