引導列中的垂直中間對齊按鈕

Question

我想垂直居中對齊引導列中的按鈕。

提琴手：https://jsfiddle.net/ebwwvy6m/23/

HTML

<div class="row"> 
    <div class="col-sm-3 vcenter">     
     <button type="button" class="btn btn-success btn-sm" id="BtnExport">Export</button> 
    </div> 
       <div class="col-sm-9"> 
        <div class="row"> 
         <div class="col-sm-6"> 
          Comment 
          <textarea rows="2" class="form-control" id="TextAreaComment"></textarea> 
         </div> 
         <div class="col-sm-6 vcenter"> 
          <button type="button" class="btn btn-primary btn-sm" id="BtnEntry">Abandon</button> 
         </div> 
        </div> 
       </div> 
      </div> 

CSS：

.vcenter { 
    display:inline-block !important; 
    vertical-align:middle !important; 
} 

後市展望：

我想什麼？

我試着按照這裏提供的解決方案，

1. Vertical align button in the middle of the column- bootstrap
2. Vertical align button middle next to text
3. Bootstrap - Vertically Align Button With Well

但是，我沒有得到解決。任何建議將不勝感激。謝謝。

Answer 1

您可以使用flexbox，只需在要將對象居中的按鈕的父級上使用該代碼段即可。

（你的情況.row格）

下面是一個例子：https://jsfiddle.net/xsmnnLoc/

但這種方法不能在IE 10的工作和更低的