Bootstrap行容器的中心内容

时间:2012-11-19 21:26:44

标签: twitter-bootstrap center

我有下面的代码,我想将外部“行”div的“well”元素居中。我尝试了各种方法,例如text-align:center(它只是文本的中心而不是内部DIV元素。

这是jsfiddle。我的想法是,我得到了一块“好”的瓷砖,并且在4个左右之后它就会被包裹起来。但是如果小于4,它们应该显示在页面的中心位置。

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>

4 个答案:

答案 0 :(得分:63)

使用Bootstrap 4,有一个专门用于此的css类。以下将以行内容为中心:

<div class="row justify-content-center">
  ...inner divs and content...
</div>

有关详细信息,请参阅:https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

答案 1 :(得分:52)

我通过以下方式解决了这个问题:

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

答案 2 :(得分:12)

试试这个,它有效!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

然后,在css中定义文档中心div和center的宽度:

.center {
    margin: 0 auto;
    width: 80%;
}

答案 3 :(得分:9)

对于Bootstrap 4,请使用以下代码:

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

参考:https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering