Question

因为我将引导程序从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;
}

但结果是： enter image description here

或者另一个例子，如何集中这个：

<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>

enter image description here

感谢您的帮助

Answer 1

为了使用margin: 0 auto;使块级元素居中，它的宽度必须小于其包含的块（使auto值有意义） - 因为#container跨越其父级的宽度（<body>），根本没有要分配的余量。

margin: 0 auto;的一种方法是将.btn-toolbar设置为inline-block，然后通过将text-align: center;添加到其包含的块来居中。您可以将相同的概念应用于第二个示例：

http://fiddle.jshell.net/52VtD/94/

Answer 2

在这种情况下，margin:0 auto不起作用，因为元素的宽度为100%。如果您希望它工作，您必须在元素上设置宽度：

.btn-toolbar {
    width: 50px;
    margin: 0px auto;
}

如果要将文本和按钮居中，可以将类text-center添加到父元素，在本例中为.row。这个类的样式只是text-align: center。

<div class="row text-center">
  ..
</div>

EXAMPLE HERE

正如@Adrift指出的那样，通过将元素inline-block置于中心会更有效率，因为您可以使用text-align:center而不是margin:0 auto并避免必须设置元素上的固定宽度。这将确保元素无论宽度如何都居中。 (example here) - 不要忘记您只需将课程text-center添加到父级即可进行居中。

值得注意的是，inline / inline-block元素在标记中尊重空格，因此如果存在则生成空间。如果您要删除此空格，请参阅this answer。

无法在bootstrap 3上居中div

2 个答案: