Question

嘿所以我有一个进度条，我希望垂直居中一个div对象。以下是我当前代码的截图：

HTML页面视图

正如您所见，进度条位于蓝色div的顶部。我需要它垂直坐在div的中心。这是我的代码：

<div class="container">
            <div class="text-center">
                <div class="row">
                    <div class="col-xs-6" style="background-color: blue;">
                    <h2>Title goes here</h2>
                    <p>This is some text blah blah</p>
                    </div>
                    <div class="col-xs-6" >
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:29.17%">
                                -
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

如果你知道如何轻松地做到这一点，我很想知道＆amp;任何帮助表示赞赏。此外，如果我可能编码错误等。请让我知道，我很乐意学习！

Answer 1

只需为row和div.progress

添加此简单的CSS即可

＆＃13;

.row{
  display:flex;
  align-items:center;
}
div.progress{
  margin:0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
            <div class="text-center">
                <div class="row">
                    <div class="col-xs-6" style="background-color: blue;">
                    <h2>Title goes here</h2>
                    <p>This is some text blah blah</p>
                    </div>
                    <div class="col-xs-6" >
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:29.17%">
                                -
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

＆＃13;

Answer 2

.container { margin-top: 10px; }
    
    .progress-bar-vertical {
      width: 20px;
      min-height: 100px;
      display: flex;
      align-items: flex-end;
      margin-right: 20px;
      float: left;
    }

<div class="progress progress-bar-vertical">
     <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-         valuemin="0" aria-valuemax="100" style="height: 30%;">      
        <span class="sr-only">30% Complete</span>
     </div>
</div>

使用Div垂直居中一个引导进度条？

2 个答案: