自从我将 Bootstrap 从 2.1 升级到 3.0 后，我无法将很多 div 居中
例如这段代码:
<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>
我有这条规则:
#center {
margin: 0 auto;
}
但结果是:
或者另一个例子，如何居中:
<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>
谢谢你的帮助
最佳答案
为了使 block 级元素居中，使用 margin: 0 auto;它还必须具有小于其包含 block 的宽度(为了使 auto 值有意义)- 因为 #container跨越其父级(<body>)的宽度，根本没有可分配的边距。
margin: 0 auto; 的替代方法将设置 .btn-toolbar至 inline-block然后通过添加 text-align: center; 将其居中到它的包含 block 。您可以将相同的概念应用于第二个示例:
关于html - 无法在 bootstrap 3 上将 div 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19040121/