Comment puis-je centre une image à l'intérieur d'un Bootstrap panneau imbriquée à l'intérieur d'un autre groupe?

J'ai une page avec un bootstrap panneau et à l'intérieur de ce panneau, j'ai un autre panneau. L'objectif est de disposer de plusieurs les panneaux imbriqués à l'intérieur de la principale est de créer quelque chose qui ressemble à une galerie d'images.

J'ai été en mesure de créer du contenu et à ce point, il est à l'écoute, en ajustant le nombre d'imbrication des panneaux par ligne et sa taille si nécessaire.

Toutefois, les panneaux intérieurs ont une image qui devrait être centré. J'ai essayé de placer l'image à l'intérieur d'un div avec classe conteneur. Cependant, quand je fais ça, à certaines tailles d'écran, les images finissent à l'extérieur de l'intérieur des panneaux.

Voici mon code HTML (pour des raisons de simplicité avec seulement 2 panneaux intérieurs):

<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 disponible ici: http://jsfiddle.net/9LFKV/

Si vous redimensionnez votre navigateur, vous verrez que le panneau intérieur se développe en largeur, mais l'image est aligné à gauche.

Dans ce cas, comment dois-je mettre l'image centrée sans casser tout le reste?

OriginalL'auteur Rodrigo Lira | 2014-03-08