引导列中的垂直居中对齐按钮答案

【问题标题】：Vertically middle align button in bootstrap column引导列中的垂直居中对齐按钮
【发布时间】：2017-04-16 12:32:12
【问题描述】：

我想垂直居中对齐引导列中的按钮。

提琴手： 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;   
}

预期：

我尝试了什么？

我尝试按照此处提供的解决方案，

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用 flexbox，只需在要居中的按钮的父级上使用 sn-p。

（在您的情况下为 .row div）

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

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

但此方法不适用于 IE 10 及更低版本

【讨论】：

感谢您的建议。 +1 来自我。我将等待任何其他适用于 IE 9 及更高版本的建议。

【解决方案2】：

.align-self-center 可以工作。

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

</div>

【讨论】：