如何在div内居中放置引导容器？
Vinayak Garg
我正在使用引导网格来显示图像库。现在，我想将整个引导程序集中.container在内div (.abc)。这是小提琴的链接-http: //jsfiddle.net/tn3j2kos/
下面的代码-
.abc {
margin: auto;
width: 96%;
background-color: #ffffcc;
}
.imgframe {
position: relative;
display: inline-block;
width: 120px;
height: 80px;
margin: 5px;
}
div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: inline-block;
height: 100%;
max-height: 70px;
max-width: 110px;
margin: auto;
}<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="abc">
<div class="container">
<div class="row">
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
</div>
</div>
</div>
</body>更多详细信息-小提琴中的示例有五个缩略图。我希望其中的缩略图div .row保持左对齐。并且缩略图组（内部div .container）在内部居中对齐div .abc。
我的几次尝试都失败了，我为最后一次尝试发布了代码。
编辑-不要在SO内部运行代码片段，因为它呈现不正确。使用我在顶部发布的js小提琴代替。
编辑2-也许我可以通过这个方程式解释我想要实现的目标container_width = no_of_thumb*(thumb_width+margin*2)。
编辑3-它的外观-
我希望它如何出现-
颜色
我认为您有点误解了引导程序的工作原理：
.container应该是您最外面的包装，否则您可以.container-fluid代替使用.col-类确定它们被加到的块的宽度和填充/边距。弄乱这些值会破坏响应能力。.col如果需要处理尺寸问题，请在这些块中使用包装纸。- 您为什么要绝对定位那些图像？我看不到您要达到的目标...
我继续清理你的小提琴。我认为这可能是您的追求：http : //jsfiddle.net/tn3j2kos/4/embedded/result/
HTML：
<div class="abc">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6">
<img class='img-responsive' src=#" />
</div>
....
CSS：
.abc {
background-color: #ffffcc;
padding: 0 4%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在引导网格内居中放置文本
- 2
如何在div内居中放置div？
- 3
如何在父div内居中放置数据？
- 4
如何在div内居中放置元素？
- 5
如何在父div内居中放置数据？
- 6
如何在div元素内居中放置文本？
- 7
如何在div内居中放置图片？
- 8
如何在div内水平居中放置网格块？
- 9
如何在div内居中放置CSS精灵？
- 10
如何在引导程序的两列中间居中放置一个方形div？
- 11
如何在同位素容器内居中放置物品？
- 12
Bootstrap：如何在液体容器内部正确居中放置6列DIV
- 13
如何在div /容器中居中放置文本和图像
- 14
如何在太小的容器中居中放置文本？
- 15
如何在容器中居中放置文本？
- 16
如何在固定div内垂直居中放置DIV（具有自动高度）
- 17
如何在div内垂直居中放置按钮和文本
- 18
如何在SVG g元素内居中放置文本？
- 19
如何在锚标签内居中放置文本
- 20
如何在LI内垂直居中放置图像
- 21
如何在网格内居中放置TextBox元素
- 22
如何在白色内居中放置文本？
- 23
如何在div中居中放置垂直文本？
- 24
如何在多个div中垂直居中放置文本
- 25
如何在div中居中放置图像？
- 26
如何在div下方居中放置工具提示？
- 27
如何在多个div中垂直居中放置文本
- 28
如何在div中居中放置图像？
- 29
如何在CSS的li中水平居中放置div
我来说两句