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
Vous devez vous connecter pour publier un commentaire.
Twitter bootstrap a une classe d'assistance de
center-block
, vous pouvez l'utiliser pour aligner l'élément horizontalement comme suit:TRAVAIL DE DÉMONSTRATION.
Vous pouvez également utiliser
text-center
classe pour la parent élément d'aligner ses éléments inline.Je ne pense pas, Cependant, vous pouvez vous référer ma réponse ici pour le mettre en œuvre; Simplement par:
.center-block { display: block; margin-left: auto; margin-right: auto; }
.J'utilise la version 3. Mais j'ai appris Bootstrap avec la version 2 et ne me souviens pas si c'était disponible à ce moment. C'était juste de la curiosité vraiment. Merci!
OriginalL'auteur Hashem Qolami
Ajouter du style margin:auto à votre image,qui vous aidera à l'horizontale au centre de votre image
OriginalL'auteur Maria Rose