水平居中div

Question

我必须在这里找到一些非常简单的东西：

<div class="row">
    <div class="col-lg-12">
        <a href="/add" class="btn btn-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> &nbsp; Add User
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-12" ng-show="users.busy">
        <div class="spinner-loader center-block"></div>
    </div>
</div>

我使用过bootstrap类，包括center-block。但它总是这样：

为什么页面中心没有微调器图标？

Answer 1

通过更改一些HTML，可以解决您的问题

<div class="row">
    <div class="col-lg-12 text-center" ng-show="users.busy">
        <span class="spinner-loader">Loading</span>
    </div>
</div>

而不是<div>对于微调器我采用<span>水平居中，因为text-center班级为父<div>。

Answer 2

你可以试试这个：

<div class="row">
    <div class="col-lg-12">
        <a href="/add" class="btn btn-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> &nbsp; Add User
        </a>
    </div>
</div>

<center>
<div class="row">
    <div class="col-lg-12" ng-show="users.busy">
        <div class="spinner-loader"></div>
    </div>
</div>
</center>

Answer 3

不是使用center-block，而是添加text-center类

Answer 4

我一直在使用bootstrap col-md-offset css来集中我的div。例如：

<div class=container>
<div class=row>
    <div class=form-horizontal>
        <div class="col-md-offset-4 col-md-4">
            <div class="your div">
            </div>
        </div>
    </div>
</div>

您的div将响应，因此当您调整窗口大小时，div将保留在窗口的中心。