无法在引导程序3上居中div [英] Unable to center div on bootstrap 3
问题描述
自从将引导版本从2.1升级到3.0后，我无法居中很多div
例如，使用此代码：
< div id =centerclass =container>
< div class =row>
< div class =btn-toolbar>
< div class =btn-group>
< a class =btn btn-defaulthref =＃> test< / a>
< / div>
< / div>
< br />
< p>我居中吗？< / p>
< a class =btn btn-defaulthref =＃>返回< / a>
< / div>
< / div>
我有这个规则：
#center {
margin：0 auto;但是结果是：
< //i.stack.imgur.com/QYs99.pngalt =enter image description here>
或另一个例子，如何居中：
< div id =centerclass =container>
< div class =row>
< li class =col-md-5>
< ul class =list-unstyled>
< li>< i class =icon-user>< / i> aaaaaaaaa< / li>
< li>< i class =icon-envelope>< / i> bbbbbbbbbb< / li>
< li>< i class =icon-envelopebug>< / i> cccccccccccc< / li>
< / ul>
< / li>
< li class =col-md-5>
< ul class =list-unstyled>
< li>< i class =icon-user>< / i> aaaaaaaaa< / li>
< li>< i class =icon-envelope>< / i> bbbbbbbbbb< / li>
< li>< i class =icon-envelopebug>< / i> cccccccccccc< / li>
< / ul>
< / li>
< / div>
< / div>
感谢您的帮助
为了使用 margin：0 auto; 使块级元素居中，它还必须具有小于其包含块的宽度（对于 auto value有意义） - 因为 #container 跨越其父级的宽度（ body> ），只是没有分发余额。
margin：0 auto; 的替代方法是设置 .btn- 到 inline-block ，然后通过添加 text-align：center; 到其包含块。您可以对第二个示例应用相同的概念：
http：/ /fiddle.jshell.net/52VtD/94/
I'm unable to center a lot of div since I upgrade my bootstrap from 2.1 to 3.0
For example with this code:
<div id="center" class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default" href="#">test</a>
</div>
</div>
<br />
<p>Am I centered ?</p>
<a class="btn btn-default" href="#">Back</a>
</div>
</div>
I had this rule:
#center {
margin: 0 auto;
}
But the result is:
Or another example, how to center this:
<div id="center" class="container">
<div class="row">
<li class="col-md-5">
<ul class="list-unstyled">
<li><i class="icon-user"></i> aaaaaaaaa</li>
<li><i class="icon-envelope"></i> bbbbbbbbbb</li>
<li><i class="icon-envelopebug"></i> cccccccccccc</li>
</ul>
</li>
<li class="col-md-5">
<ul class="list-unstyled">
<li><i class="icon-user"></i> aaaaaaaaa</li>
<li><i class="icon-envelope"></i> bbbbbbbbbb</li>
<li><i class="icon-envelopebug"></i> cccccccccccc</li>
</ul>
</li>
</div>
</div>
Thank you for your help
In order to center a block level element using margin: 0 auto; it must also have a width that is smaller than its containing block (for the auto value to make sense) - because #container is spanning the width of its parent (the <body>) there is simply no margin to distribute.
An alernative approach to margin: 0 auto; would be to set .btn-toolbar to inline-block and then centering it by adding text-align: center; to its containing block. You can apply the same concept to the second example:
http://fiddle.jshell.net/52VtD/94/
这篇关于无法在引导程序3上居中div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
