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

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. 列引导中间的垂直对齐按钮
2. 垂直对齐按钮中间文本旁边
3. Bootstrap - 垂直对齐按钮

但是,我没有得到解决方案.任何建议将不胜感激.谢谢.

Answer 1

.align-self-center 将工作。

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

</div>

Answer 2

您可以使用flexbox,只需使用要在其中居中项目的按钮的父级的片段.

(在你的情况下.row div)

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

这是一个例子:https://jsfiddle.net/xsmnnLoc/

但是这种方法在IE 10及更低版本上不起作用