使用Div垂直居中引導進度條？

嘿所以我有一個進度條，我想垂直居中一個div對象。這裏是什麼我當前的代碼看起來像截圖：使用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>

如果你知道如何輕鬆地做到這一點，我很想知道&任何幫助表示讚賞。另外，如果我可能編碼錯誤等請讓我知道，我很樂意學習！

來源

2016-12-27 Luke Hela

顯示與CSS代碼。 – aavrug

這個問題已經被問到[** Here **]（http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3） –

這個CSS是正常的bootstrap.min.css，沒有做出任何改變，並且將它粘貼在這裏很重要。 –

只需添加這個簡單的CSS 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>

來源

2016-12-27 10:43:08 ab29007

工作完美！ –

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

來源

2016-12-27 10:43:49

使用Div垂直居中引導進度條？

回答

相關問題