他の列に対して垂直に列の要素を中央に配置する方法

Question

ビューに垂直に2つのボタンを中央に配置するにはどうすればよいですか？例えば

：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-5"> 
      <h4>My List</h4> 
      <div style="height:400px; overflow-y:auto"> 
       <ul> 
        // List of checkboxes 
       </ul> 
      </div> 
     </div> 

     <div class="col-md-2"> 
      <input type="button" id="btnAddField" class="btn btn-primary" value="Add" /> 
      <input type="button" id="btnRemoveField" class="btn btn-primary" value="Remove" /> 
     </div> 

     <div class="col-md-5"> 
      <h4>Selected Fields</h4> 
      // This will contain the list selected from the checkboxes. 
     </div> 
    </div> 
</div> 

私はこのケースでは、私は400ピクセルの高さを作っている（2欄のボタンが列1との関係を中心にしたい

Answer 1

あなたは新しいクラスを上に追加することができます。幅のブレークポイントである> 992pxときrowalign-items: centerとFlexboxと垂直中心アイテムを使用することmdDEMO

@media(min-width: 992px) { 
    .flex-row { 
    display: flex; 
    align-items: center; 
    } 
} 

Answer 2

試行css行の高さ。それが助けてくれることを願って。

vertical-align: middle; 
line-height: 400px; 

Answer 3

あなたはフレキシボックスを使用することができた場合は、このようなものは、（既存のクラスを使用して）あなたがやりたいことになります。

.row { 
    display: flex; 

    [class^="col"] { 
     float: none; 
     flex-shrink: 0; 
     margin: auto 0; 
    } 
}