html - 将 Bootstrap 进度条与 Div 垂直居中？

Question

嘿，我有一个进度条，我想将其与 div 对象垂直居中。这是我当前代码的屏幕截图:

HTML 页面 View

正如您所看到的，进度条位于蓝色 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>

如果您知道如何轻松地做到这一点，我很想知道并且不胜感激。另外，如果我可能编码错误等。请告诉我，我很乐意学习!

Answer 1

只需为 row 和 div.progress 添加这个简单的 css

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

<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>