74

我有下面的代码，我想将外部“行”div的“好”元素居中。我尝试了各种方法，例如 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

4 回答 4

196

使用 Bootstrap 4，有一个专门用于此的 css 类。下面将居中行内容：

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

有关更多信息，请参阅：https ://v4-alpha.getbootstrap.com/layout/grid/#horizo​​ntal-alignment。

于 2017-12-12T01:53:01.227 回答
75

我通过执行以下操作解决了这个问题：

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>
于 2012-11-19T22:35:02.777 回答
20

对于 Bootstrap 4，使用以下代码：

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

参考：https ://getbootstrap.com/docs/4.0/utilities/spacing/#horizo​​ntal-centering

于 2018-02-10T11:31:26.037 回答
18

试试这个，它有效！

<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 {
    margin: 0 auto;
    width: 80%;
}
于 2015-04-04T13:21:22.627 回答