如何将引导按钮与一行中的文本垂直对齐？答案

【问题标题】：How to vertically align bootstrap buttons with text in a row?如何将引导按钮与一行中的文本垂直对齐？
【发布时间】：2013-12-11 03:15:41
【问题描述】：

我遇到了引导行的问题。我的按钮没有与我的行文本垂直对齐。这是问题的一个例子：

<div class="col-md-2 text-right">
    <button class="btn btn-lg btn-primary" type="button">A</button>
</div>
<div class="col-md-1 text-center">
    <h3>or</h3>
</div>
<div class="col-md-2 text-left">
    <button class="btn btn-lg btn-primary" type="button">B</button>
</div>

如果我将其放大，文本甚至会挂在按钮的下方，如下所示：

<div class="col-md-1 text-center">
    <h1>OR</h1> <!-- H1 now! -->
</div>

有没有办法让“或”的底部与按钮文本的底部对齐？或者甚至只是让文本以按钮为中心？谢谢！

更新：这是一个 JSFiddle，根据要求：http://jsfiddle.net/Dk37C/1/（您必须拉伸右侧显示屏才能看到行为）

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我找到了一种在 MVC 视图中使用文本引导类和按钮的简单方法，但我很确定这个想法适用于任何可以使用引导程序的地方。

只要在文本和按钮的类属性中放入相同的头类，例如h3即可。

例如：

<div class="col-md-6 h3">
    Mileage Reimbursed Travel
</div>

<div class="col-md-2 h3">
    @Html.ActionLink("Create/Add ","Create", "EmployeeMileage")
</div>

【讨论】：

这只是将 h3 边距添加到 div。这最终不会使文本与按钮对齐

【解决方案2】：

<h3> 设置了边距，所以如果它变大，边距顶部将保持不变，但字体大小会“向下”增加。

您可以设置<h3> 的样式以匹配按钮的样式，即填充、行高、字体大小等。

.text-center h3 {
  padding: 11px 16px; /* Extra pixel top and bottom for border on buttons */
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
  margin: 0;
}

http://jsbin.com/UNAYOqU/1/edit

【讨论】：

太棒了！我不知道为什么我用<h3> 做我的例子。随机的，大脑一定已经慢下来了……
好吧，在我的例子中我有<h1> 和<h3> ......但<h1> 恰好是我最后选择的。谢谢。

【解决方案3】：

我认为您可以尝试使用 vertical-align css 属性。 Here 是一篇很好的关于如何使用垂直对齐的文章。

【讨论】：

【解决方案4】：

如果您赶时间，（我并不是说这是最好的解决方案，但嘿，它有效）将您想要与您的按钮对齐的文本放在另一个按钮中，然后使用 CSS 删除诸如背景之类的内容和边框并禁用按钮。我每隔一段时间就使用这个解决方案，效果很好。

【讨论】：