如何在一行中垂直对齐Bootstrap按钮和文本？

Question

我在使用Bootstrap的行时遇到了问题，我的按钮与行文本垂直对齐不上。以下是问题的示例：

<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/（你需要拉伸右侧显示来查看行为）

- Mike Cialowicz

Answer 1

我发现在MVC视图中使用Bootstrap类来设置文本和按钮非常简单，但我相信这个想法适用于任何可以使用Bootstrap的地方。

只需在文本和按钮的class属性中放置相同的标题类，例如h3。

例如：

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

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

- glenn garson

---

这只是将h3边距添加到div中。这并没有使文本与按钮对齐。 - Met-u

Answer 2

标签上设置了margin属性，因此如果它变大，margin-top仍将保持不变，但字体大小会向“下方”增加。

您可以将

的样式设置为与按钮相同，即padding、line-height、font-size等。

.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

- davidpauljunior

---

太好了！我不确定为什么我用 <h3> 来做我的例子。可能是随意选的，我的大脑可能已经开始放缓了... - davidpauljunior

好的，我在我的示例中同时使用了<h1>和<h3>...但最终我选择了<h1>。谢谢。 - Mike Cialowicz

Answer 3

我认为您可以尝试使用vertical-align css属性。这里有一篇很好的文章（点击这里），介绍了如何使用垂直对齐。

- Dan

Answer 4

如果你很着急的话，（我不是说这是最好的解决方案，但它可行）可以将想要与按钮对齐的文本放在另一个按钮中，然后使用 CSS 移除背景和边框等内容，并禁用该按钮。我偶尔会使用这个方法，效果很好。

- Post Impatica