Html div上的引导中心进度条
我试图使用一个引导进度条作为加载指示器,我希望进度条具有一定的宽度,整个内容在DIV中居中。但是进度条似乎不喜欢居中 当我这样做时:Html div上的引导中心进度条,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图使用一个引导进度条作为加载指示器,我希望进度条具有一定的宽度,整个内容在DIV中居中。但是进度条似乎不喜欢居中 当我这样做时: <div class="text-center"> <img src="~/Content/Images/loading.gif" style="height:80px;" /> </div> 图像正确居中。但当我将其替换为进度条时,它会显示在左侧: <div class="text-center">
<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>
加载。。。
我希望进度条居中显示。这一点css对我很有用
.progress { margin-left: auto; margin-right:auto; }
或者,您可以只使用Bootstrap的
中心块
类
<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>
加载。。。
只想增强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%">
而且它很有效,所以不要害怕CSS,继续用代码接受Panga(挑战;) 谢谢,我是CSS向导的反面,所以我不知道这样的基本知识。啊,谢谢。这就是我所希望的,不需要特定CSS的东西。Bootstrap把我宠坏了。
.download {
padding-top: 90px;
padding-bottom: 90px;
background: #fff;
}
.download .progress { margin-left: auto; margin-right:auto; }