如何在嵌套在另一个面板中的 Bootstrap 面板中居中图像？

Question

我有一个带有主引导面板的页面，在这个面板内我有另一个面板。目标是在主面板内有多个嵌套面板，创建看起来类似于图片库的内容。

我能够创建内容，此时它是响应式的，必要时调整每行嵌套面板的数量及其大小。

但是，内部面板有一个应该居中的图像。我尝试将图像放置在 div 中，其中包含 container 类。但是，当我这样做时，在某些屏幕尺寸下，图像最终会出现在内面板之外。

这是我的 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 在这里可用：http://jsfiddle.net/9LFKV/

如果您调整浏览器的大小，您会发现在某些时候内部面板的宽度会增加，但图像是左对齐的。

在这种情况下，如何在不破坏其他所有内容的情况下将图像居中放置？

Answer 1

Twitter bootstrap 有一个辅助类 center-block，您可以使用它来水平对齐元素，如下所示：

<img src="http://placehold.it/150x150" class="img-responsive center-block">

WORKING DEMO.

您还可以为 parent 元素使用 text-center 类来对齐其内联元素。

Answer 2

为您的图像添加样式边距：自动，这将帮助您将图像水平居中