7

自从我将引导程序从 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>

在此处输入图像描述

谢谢您的帮助

4

2 回答 2

10

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

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

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

于 2013-09-26T23:11:50.250 回答
4

在这种情况下，margin:0 auto不起作用，因为元素的宽度是100%. 如果你想让它工作，你必须在元素上设置一个宽度：

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

如果要使文本和按钮居中，可以将类添加text-center到父元素，在这种情况下：.row. 这个类的样式很简单text-align: center。

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

这里的例子

正如@Adrift 指出的那样，通过制作它来使元素居中会更有效inline-block，因为您可以使用text-align:center它来margin:0 auto避免必须在元素上设置固定宽度。这将确保元素居中而不管其宽度如何。（此处的示例） -不要忘记您可以将类添加text-center到父级以进行居中。

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

于 2013-09-26T23:11:43.113 回答