引导列中的垂直中间对齐按钮

Question

我想垂直对齐bootstrap列中的按钮。

Fiddler： 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 div）

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

以下是一个示例：https://jsfiddle.net/xsmnnLoc/

但是这种方法不适用于IE 10及更低版本

Answer 2

.align-self-center将起作用。

<div class="col-sm-6 align-self-center">

</div>