我有一个带有主 Bootstrap 面板的页面,在这个面板中我有另一个面板。目标是在主面板内嵌套多个面板,创建类似于图片库的内容。
我能够创建内容,此时它是响应式的,在必要时调整每行嵌套面板的数量及其大小。
然而,内部面板有一个应该居中的图像。我尝试将图像放在 div 中,类为 container。但是,当我这样做时,在某些屏幕尺寸下,图像最终会在内面板之外。
这是我的 HTML(为了简单起见,只有 2 个内部面板):
<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 在这里可用:http://jsfiddle.net/9LFKV/
如果您调整浏览器的大小,您会发现在某些时候内部面板的宽度会增加,但图像会左对齐。
在那种情况下,我如何将图像居中而不破坏其他一切?
最佳答案
Twitter bootstrap 有一个辅助类 center-block
,您可以使用它来水平对齐元素,如下所示:
<img src="http://placehold.it/150x150" class="img-responsive center-block">
您还可以使用 text-center
parent 元素的类以对齐其内联元素。
关于css - 如何将嵌套在另一个面板内的 Bootstrap 面板内的图像居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22276190/