html - 列中垂直居中的 Bootstrap 3 按钮

Question

我花了一些时间试图弄清楚为什么我的按钮不会在我想我会在这里问的列内垂直居中，因为我想我遗漏了一些东西，HTML:

<div class="container">
    <div class="row">
        <div class="sellthem">
            <div class="col-sm-8 col-sm-offset-1">
                <div class="sellContent">
                    <h1 class="sellHeader">Bacon ipsum dolor amet fatback turkey filet mignon</h1>
                    <h4 class="sellText">Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip</h4>
                </div>
            </div>
            <div class="col-sm-2 sendThem">
                <button type="button" class="btn btn-lg btn-block">Sign Up</button>
            </div>  
        </div>
    </div>
</div>

h1 和 h4 标签中的文本会发生变化，因此高度可能会发生变化，我想将按钮置于 col-sm- 列的中心2。当我研究 buttons 下的 Bootstrap 文档时关于垂直居中没有任何提及。

当我搜索 SO 时，我遇到了 How can I center vertically a bootstrap class button?但它使用了 200px 的强制高度，answer :

div#container {
    height: 200px; 
    border: solid 2px green; text-align:center;
    line-height:200px;
}
input#verticalButton {
     vertical-align: middle;
}

进一步研究，How to center buttons in Twitter Bootstrap 3?建议 center-block 但那是为了水平居中，我想要垂直居中。

在兔子洞的更深处，我遇到了 button vertical align bootstrap但是当我尝试时:

HTML:

<div class="sendThem">
    <div class="col-sm-2">
        <button type="button" class="btn btn-lg btn-block">Sign Up</button>
    </div>
</div>

CSS:

.sendThem {
    display:table;
}
.sendThem .col-sm-2 {
    display:table-cell;
    vertical-align:middle;
    float:none;    
}

我的结果是一样的，就是顶部的一个按钮。我想，根据某处的阅读，该专栏可能会导致问题，但我似乎无法找到该文档。

用 HTML 和 CSS 使按钮垂直居中的正确方法是什么，这样我就可以得到这样的东西:

我不打算使用设置的高度，col-sm 以下的任何内容都将成为全宽居中按钮。这是一个 Bootply尝试使按钮垂直居中。

Answer 1

你可以使用这段代码:

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

@media only screen and (max-width : 768px) {
    .sellthem {
        display: block;
    }
}

考虑到这更像是一个 hack(你正在覆盖它的代码库)所以它不是解决这个问题的最佳方法，因为 Bootstrap 在其网格系统中不支持垂直对齐(不确定但我认为在新版本中它们将垂直对齐)。

注意:请在您支持的所有浏览器中检查此解决方案。

两种可能的解决方案是使用另一个基于 flexbox 的网格系统，或者只为您自己的这种情况编写样式。

更新

你可以只写下面的，它应该是一样的:

@media only screen and (min-width : 768px) {
    .sellthem {
        display: flex;
        align-items: center;
    }
}