引導垂直對齊一行在一處山坳

Question

我有一個代碼：http://www.bootply.com/8uA4jyGZKB

我想在圖片的右側，以verticaly中心，文本和圖標。 如何垂直居中col-md-10 div中是什麼？

感謝

Answer 1

您可以使用CSS Flexbox的。

將.row設爲彈性容器，並使用align-items屬性將內容垂直居中。就像：

.row { 
    display: flex; 
    align-items: center; 
} 

看一看片斷如下（使用全屏幕預覽）：

body { 
 
    padding-top: 50px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-2"> 
 
      <img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class=""> 
 
     </div> 
 
     <div class="col-md-10"> 
 
      <div class="col-md-4"> 
 
       <div class="row"> 
 
        <div class="col-md-12" contenteditable="false">Justin Bieber</div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-md-12">Baby</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-8"> 
 
       <div class="row"> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span> 
 

 
        </div> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-play"></span> 
 

 
        </div> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span> 
 
        </div> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span> 
 

 
        </div> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-random"></span> 
 

 
        </div> 
 
        <div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span> 
 

 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!-- /.container -->

希望這有助於！