在列内垂直居中 Bootstrap 3 按钮

Posted 2023-03-05

【中文标题】在列内垂直居中 Bootstrap 3 按钮

【英文标题】：Vertically center Bootstrap 3 button within column

【发布时间】：2017-02-20 09:27:29

【问题描述】：

我花了一些时间试图弄清楚为什么我的按钮不会在我想我会在这里问的列中垂直居中，因为我认为我遗漏了一些东西，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 试图将按钮垂直居中。

【问题讨论】：

我会说仅使用 Bootstrap 3 网格系统是不够的，您需要引入一些特定的样式，甚至根本不使用网格。您需要支持哪些浏览器？

不担心旧版浏览器，但仍需要支持当前的 IE。

你能上传一个例子到 jsfiddle 或 codepen 吗？

@MauroGava 我创建了一个 bootply，包含在编辑中。

【参考方案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;