Html 如何在嵌套在另一个面板内的 Bootstrap 面板内将图像居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22276190/
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
How do I center an image inside a Bootstrap panel nested inside another panel?
提问by Rodrigo Lira
I have a page with a main bootstrap panel and inside this panel I have another panel. The objective is to have multiple nested panels inside the main one creating something that looks similar to an image gallery.
我有一个带有主引导面板的页面，在这个面板内我有另一个面板。目标是在主面板中有多个嵌套面板，创建看起来类似于图片库的东西。
I was able to create the content and at this point it is responsive, adjusting the number of nested panels per row and its size when necessary.
我能够创建内容，此时它是响应式的，在必要时调整每行嵌套面板的数量及其大小。
However the inner panels have an image that should be centered. I tried placing the image inside a divwith class container. However, when I do that, at certain screen sizes, the images end up outside the inner panels.
然而，内面板有一个应该居中的图像。我尝试将图像放置在带有 class container的div中。但是，当我这样做时，在某些屏幕尺寸下，图像最终会出现在内面板之外。
Here's my HTML (for the sake of simplicity with only 2 inner panels):
这是我的 HTML（为了简单起见，只有 2 个内面板）：
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<!--BEGIN OF ITEM 1 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 1 -->
<!--BEGIN OF ITEM 2 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 02</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 2 -->
</div>
</div>
</div>
</div>
jsfiddle available here: http://jsfiddle.net/9LFKV/
jsfiddle 在这里可用：http: //jsfiddle.net/9LFKV/
If you resize your browser, you'll see that at some point the inner panel grows in width but the image is left aligned.
如果您调整浏览器的大小，您会看到在某些时候内面板的宽度增加，但图像左对齐。
In that case, how do I put the image centered without breaking everything else?
在这种情况下，如何在不破坏其他所有内容的情况下将图像居中放置？
回答by Hashem Qolami
Twitter bootstrap has a helper class of center-block, you could use that to align the element horizontally as follows:
Twitter bootstrap 有一个辅助类center-block，您可以使用它来水平对齐元素，如下所示：
<img src="http://placehold.it/150x150" class="img-responsive center-block">
工作演示。
You can also use text-centerclass for the parentelement to align its inline elements.
您还可以使用父元素的text-center类来对齐其内联元素。
回答by Maria Rose
Add style margin:auto to your image,that will help you to horizontally center your image
将样式边距：自动添加到您的图像，这将帮助您将图像水平居中
