垂直居中 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? but it uses a forced height of 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;
    }
}

垂直居中 Bootstrap 列内的 3 个按钮

Vertically center Bootstrap 3 button within column

html

css

vertical-alignment

twitter-bootstrap-3