html – 无法在bootstrap 3上居中div

前端之家收集整理的这篇文章主要介绍了html – 无法在bootstrap 3上居中div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因为我将引导程序从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>

谢谢您的帮助

解决方法

为了使用margin来居中块级元素:0 auto;它的宽度必须小于其包含的块(因为auto值是有意义的) – 因为#container跨越其父级的宽度(< body>),所以根本没有要分配的边距.

保证金的一种方法:0自动;将.btn-toolbar设置为内联块,然后通过添加text-align:center来居中;到它的包含块.您可以将相同的概念应用于第二个示例:

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

原文链接:https://www.f2er.com/html/225907.html

猜你在找的HTML相关文章