热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

无法在bootstrap3上居中div-Unabletocenterdivonbootstrap3

ImunabletocenteralotofdivsinceIupgrademybootstrapfrom2.1to3.0因为我将引导程序从2.1升级到3.0,所以

I'm unable to center a lot of div since I upgrade my bootstrap from 2.1 to 3.0

因为我将引导程序从2.1升级到3.0,所以我无法集中很多div

For example with this code:

例如,使用此代码:


Am I centered ?

Back

I had this rule:

我有这个规则:

#center {
    margin: 0 auto;
}

But the result is: enter image description here

但结果是:

Or another example, how to center this:

或者另一个例子,如何居中:

    • aaaaaaaaa
    • bbbbbbbbbb
    • cccccccccccc
    • aaaaaaaaa
    • bbbbbbbbbb
    • cccccccccccc
  • enter image description here

    Thank you for your help

    感谢您的帮助

    2 个解决方案

    #1


    10  

    In order to center a block level element using margin: 0 auto; it must also have a width that is smaller than its containing block (for the auto value to make sense) - because #container is spanning the width of its parent (the ) there is simply no margin to distribute.

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

    An alernative approach to margin: 0 auto; would be to set .btn-toolbar to inline-block and then centering it by adding text-align: center; to its containing block. You can apply the same concept to the second example:

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

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

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

    #2


    4  

    In this instance, margin:0 auto doesn't work because the width of the element is 100%. If you want it to work, you would have to set a width on the element:

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

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

    If you want to center the text and the button, you could add the class text-center to the parent element, in this case: .row. The styling of this class is simply text-align: center.

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

    ..

    EXAMPLE HERE

    这里的例子

    As @Adrift points out, it would be much more efficient to center the element by making it inline-block, as you can use text-align:center as opposed to margin:0 auto and avoid having to set a fixed width on the element. This will ensure that the element is centered regardless of its width. (example here) - don't forget you can just add the class text-center to the parent for centering.

    正如@Adrift指出的那样,通过使其成为内联块来居中元素会更有效率,因为您可以使用text-align:center而不是margin:0 auto并避免必须在元素上设置固定宽度。这将确保元素无论宽度如何都居中。 (例如这里) - 不要忘记你可以将类文本中心添加到父级以进行居中。

    It's also worth noting that inline/inline-block elements respect white-space in the markup, and thus generate space if present. If you want to remove this space, see this answer.

    值得注意的是,内联/内联块元素尊重标记中的空白,因此如果存在则生成空间。如果要删除此空间,请参阅此答案。


    推荐阅读
    author-avatar
    sky梦幻
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有