Divのブートストラップの進行状況バーを垂直にセンタリングするには？

Question

ちょっと私は、私はdivオブジェクトを中心にしたいプログレスバーを持っている。あなたはプログレスバーが青のdivの上部に座って見ることができるようにHTMLページの

ビュー

：ここに私の現在のコードがどのように見えるかのスクリーンショットです。私はそれが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

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

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>