无法在bootstrap 3上居中div
Sté*_*ane 7 html css twitter-bootstrap twitter-bootstrap-3
因为我将引导程序从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>
谢谢您的帮助
adr*_*ift 10
为了使用margin: 0 auto;它来居中块级元素,它的宽度必须小于其包含的块(对于auto有意义的值) - 因为#container它跨越其父级(the <body>)的宽度,根本没有要分配的边距.
一个alernative方法margin: 0 auto;是设置.btn-toolbar于inline-block,然后通过加入定心它text-align: center;到它的包含块.您可以将相同的概念应用于第二个示例:
http://fiddle.jshell.net/52VtD/94/