twitter-bootstrap 无法在引导程序 3 上居中 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19040121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to center div on bootstrap 3
提问by Stéphane
I'm unable to center a lot of div since I upgrade my bootstrap from 2.1 to 3.0
自从我将引导程序从 2.1 升级到 3.0 以来，我无法将很多 div 居中
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
谢谢您的帮助
回答by adrift
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 autovalue to make sense) - because #containeris spanning the width of its parent (the <body>) there is simply no margin to distribute.
为了使用margin: 0 auto;它使块级元素居中，还必须具有小于其包含块的宽度（为了使auto值有意义） - 因为#container跨越其父级 (the <body>)的宽度，根本没有可分配的边距。
An alernative approach to margin: 0 auto;would be to set .btn-toolbarto inline-blockand then centering it by adding text-align: center;to its containing block. You can apply the same concept to the second example:
另一种方法margin: 0 auto;是设置.btn-toolbar为inline-block，然后通过添加text-align: center;到其包含块来将其居中。您可以将相同的概念应用于第二个示例：
回答by Josh Crozier
In this instance, margin:0 autodoesn't work because the width of the element is 100%. If you want it to work, you would have to set a width on the element:
在这种情况下，margin:0 auto不起作用，因为元素的宽度是100%。如果你想让它工作，你必须在元素上设置一个宽度：
.btn-toolbar {
width: 50px;
margin: 0px auto;
}
If you want to center the text and the button, you could add the class text-centerto the parent element, in this case: .row. The styling of this class is simply text-align: center.
如果要居中的文本和按钮，你可以添加类text-center的父元素，在这种情况下：.row。这个类的样式很简单text-align: center。
<div class="row text-center">
..
</div>
As @Adrift points out, it would be much more efficient to center the element by making it inline-block, as you can use text-align:centeras opposed to margin:0 autoand avoid having to set a fixed width on the element. This will ensure that the element is centered regardless of its width. (example here)- don't forget you can just add the class text-centerto the parent for centering.
正如@Adrift 指出的那样，通过 make it 将元素居中会更有效inline-block，因为您可以使用text-align:center它而不是margin:0 auto避免必须在元素上设置固定宽度。这将确保元素居中，而不管其宽度如何。（这里的例子）- 不要忘记你可以将类添加text-center到父级以进行居中。
It's also worth noting that inline/inline-blockelements respect white-space in the markup, and thus generate space if present. If you want to remove this space, see this answer.
还值得注意的是inline/inline-block元素尊重标记中的空白，因此如果存在则生成空格。如果要删除此空间，请参阅此答案。
