div上的bootstrap中心进度条

Question

我正在尝试使用Bootstrap进度条作为加载指示器,我希望进度条为一定宽度,整个事物在DIV中居中.但进度条似乎并不像是居中.

当我做:

<div class="text-center">
    <img src="~/Content/Images/loading.gif" style="height:80px;" />
</div>

图像正确居中.但是当我用它替换进度条时,它会向左移动:

<div class="text-center">
    <div class="progress" style="width:200px;"> <!-- set to certain width -->
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
            <span>
                Loading...
            </span>
        </div>
    </div>
</div>

Bootply演示

我希望进度条显示居中.

Answer 1

这一点css对我有用.

.progress { margin-left: auto; margin-right:auto; }

Answer 2

或者,您可以使用Bootstrap的center-block类

<div class="text-center">
  <div class="progress center-block" style="width:200px;"> <!-- set to certain width -->
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
      <span>
        Loading...
      </span>
    </div>
  </div>
</div>

http://www.bootply.com/a0SXqv3g6N