Zentrieren eines Bootstrap-Fortschrittsbalkens vertikal mit einer Div?

Question

Hey, ich habe einen Fortschrittsbalken, der mit einem div-Objekt vertikal zentriert werden soll. Hier ist ein Screenshot von dem, was meine aktuellen Code wie folgt aussehen:

Ansicht von HTML-Seite

Wie Sie die Fortschrittsbalken zu sehen sind, an der Spitze des blauen div sitzen. Ich brauche es, um senkrecht zum Div zu sitzen. Hier ist mein Code:

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

Wenn Sie wissen, wie diese einfach zu tun, ich würde gerne wissen, & jede Hilfe sehr geschätzt wird. Auch, wenn ich es falsch codiert haben könnte etc. Bitte lassen Sie mich wissen, ich würde gerne lernen!

Answer 1

Fügen Sie einfach diesen einfachen CSS für row und 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>