How do I center an image inside a Bootstrap panel nested inside another panel?

Question

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 div with class container. However, when I do that, at certain screen sizes, the images end up outside the inner panels.

Here's my HTML (for the sake of simplicity with only 2 inner panels):

<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/

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?

Answer 1

Twitter bootstrap has a helper class of center-block, you could use that to align the element horizontally as follows:

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

WORKING DEMO.

You can also use text-center class for the parent element to align its inline elements.

Answer 2

Add style margin:auto to your image,that will help you to horizontally center your image