在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演示

我希望进度条居中显示。

- DLeh

Answer 1

这段 CSS 对我很有效。

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

- Marcelo

---

谢谢，我不是CSS巫师的反面，所以我不知道这样的基本事情。 - DLeh

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

- Zim

---

啊，谢谢。这就是我所希望的，不需要特定的CSS。Bootstrap让我太惯了。 - DLeh

Answer 3

只是想增强Marcelo的答案，针对那些对CSS不熟悉的人（比如我）

记得检查进度条所在的类：

对于我来说，进度条位于“下载 > 进度”类中，如下所示：

<div id="download" class="download">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="main_slider" class="carousel slide banner-main" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <h3>Programming languages 1</h3>
                            <div class="progress" style="width: 50%">

所以在我的style.css中，我已经像Marcelo的答案一样添加了内容，在下载的css下面，就像这样

.download {
    padding-top: 90px;
    padding-bottom: 90px;
    background: #fff;
}

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

它起作用了，所以不要害怕CSS，继续用代码接受挑战吧 ;)

- Sayantan Mandal