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文档时，没有提到有关垂直居中的任何内容。

当我搜索时，我会遇到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;
    }
}

列中的垂直中心Bootstrap 3按钮

1 个答案: