Geek Answers Handbook

How to center an image inside a Bootstrap panel nested in another panel?

I have a page with the main loading panel, and inside this panel I have another panel. The goal is for the nested panels inside the main one to create something similar to a gallery of images.

I managed to create the content, and at that moment it reacts by adjusting the number of nested panels per line and its size when necessary.

However, the inner panels have an image that needs to be centered. I tried to place the image inside a div using the container class. However, when I do this, at certain screen sizes, the images appear outside the inner panels.

Here is my HTML (for simplicity, with only two 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 is available here: http://jsfiddle.net/9LFKV/

If you resize your browser, you will see that at some point the inner panel grows in width, but the image aligns to the left.

In this case, how to put the image in the center without breaking everything else?

+6
source share
2 answers

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

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

WORKING DEMO .

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

+32
source

Add a brand of style: automatically for your image, which helps you horizontally center your image

+5
source

More articles:


All Articles