使用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垂直居中引导进度条？

回答

相关问题