패널 안에 있는 이미지 가운데 정렬

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

7

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?

css html5 twitter-bootstrap twitter-bootstrap-3

shareimprove this question

edited Mar 10 '14 at 3:15

lozadaOmr

1,71622948

asked Mar 8 '14 at 23:02

Rodrigo Lira

83321020

add a comment

2 Answers

activeoldestvotes

35

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.

shareimprove this answer

answered Mar 8 '14 at 23:05

Hashem Qolami

72.5k20107127

• out of curiosity, would you know if this class was available back in 2.X? Guess I should spend more time reading the CSS docs. Usually spend my time on Javascript and Components docs. Anyway, Thanks a lot! – Rodrigo Lira Mar 8 '14 at 23:15
• @user1677919 I don't think so, However you can refer my answer here to implement that; Simply by: .center-block { display: block; margin-left: auto; margin-right: auto; }. – Hashem QolamiMar 8 '14 at 23:20 
• 1
  I'm using version 3. But I learned Bootstrap with version 2 and don't remember if that was available at that time. It was just out of curiosity really. Thanks! – Rodrigo Lira Mar 8 '14 at 23:57

add a comment

5

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

shareimprove this answer

answered Mar 17 '14 at 8:20

Maria Rose

14218

• Reallly Helpfull... :) Thank you very much..... – Ragesh S Mar 17 '14 at 8:22

https://stackoverflow.com/questions/22276190/how-do-i-center-an-image-inside-a-bootstrap-panel-nested-inside-another-panel