Wie Zentriere ich ein Bild im Bootstrap panel verschachtelt in einem anderen panel?

Ich habe eine Seite mit einem Haupt-bootstrap-panel und in diesem panel habe ich ein anderes panel. Das Ziel ist es, sich mehrere verschachtelte panels innerhalb der main eine, etwas zu schaffen, sieht ähnlich aus wie eine Bildergalerie.

Konnte ich erstellen, der Inhalt und an diesem Punkt ist es reaktionsschnell, Anpassung der Anzahl der verschachtelten panels pro Zeile und seine Größe, wenn nötig.

Jedoch die inneren Platten haben ein Bild sollte zentriert sein. Ich habe versucht, indem Sie das Bild im inneren, ein div mit Klasse container. Allerdings, wenn ich das mache, dass bei bestimmten Bildschirmgrößen, die Bilder, die am Ende außerhalb der inneren Platten.

Hier mein HTML-Code (der Einfachheit halber mit nur 2 inneren Platten):

<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 finden Sie hier: http://jsfiddle.net/9LFKV/

Wenn Sie die Größe Ihren browser, werden Sie sehen, dass an einem gewissen Punkt der inneren Platte wächst in der Breite, aber das Bild ist Links ausgerichtet.

In diesem Fall, wie kann ich das Bild zentriert, ohne zu brechen alles, was sonst noch?

InformationsquelleAutor Rodrigo Lira | 2014-03-08
Schreibe einen Kommentar