在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中居中按钮。当我查阅Bootstrap文档中的buttons时，并没有提到垂直居中方面的内容。

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

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

进一步的研究，如何在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 尝试垂直居中按钮。

- DᴀʀᴛʜVᴀᴅᴇʀ

---

我要说的是，仅使用Bootstrap 3网格系统是不够的，您需要引入一些特定的样式，甚至可以完全不使用网格。您需要支持哪些浏览器？ - Mauro Gava

不必担心旧版浏览器，但仍需要支持当前的IE。 - DᴀʀᴛʜVᴀᴅᴇʀ

你能否上传一个示例到jsfiddle或codepen？ - Mauro Gava

@MauroGava 我创建了一个 bootply，并包含在编辑中。 - DᴀʀᴛʜVᴀᴅᴇʀ

Answer 1

好的，您可以使用以下代码：

您可以使用以下代码：

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

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

请注意，这更像是一种黑客方式（覆盖其代码基础），因此这不是解决此问题的最佳方法，因为Bootstrap在其网格系统中没有垂直对齐的支持（不确定，但我认为在新版本中他们将有垂直对齐）。

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

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

更新

您只需编写以下内容即可使其正常工作：

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

- Mauro Gava