在 .well 类中垂直居中引导 btn答案

【问题标题】：Vertically center bootstrap btn in .well class在 .well 类中垂直居中引导 btn
【发布时间】：2012-06-26 10:40:35
【问题描述】：

我有一个链接，我想在引导框架的.well 类中垂直居中，并在锚标记上使用btn btn-danger 类。这是下面的图片。我尝试使用vertical-align:middle;，但这似乎不起作用。您可以看到井上的空间甚至不在顶部和底部。

这里是 HTML：

<div class="well">
   <%= link_to "Remove", thing, method: :delete, style: "font-size: 11px; float:right; ", :class => 'btn btn-danger'%>

</div>

【问题讨论】：

你能发布你使用它的完整 HTML 吗？在使用vertical-align之前，我们需要将display设置为inline-block。
我贴出来了。我还尝试设置display: inline-block; vertical-align:middle;，但这似乎也不起作用。
我尝试了margin-top:-3px;，它似乎有效，但它不像我想要的那样强大。
你需要给vertical-align: sub然后试试？
你能发布 HTML 渲染的吗？或创建一个fiddle？

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

看来您不应该（或根本不能）垂直对齐浮动元素。

这是我的建议：

<div class="well mywell">
    <div class="pull-right myfloater">
       <button class="btn btn-danger vcenter">Remove</button>    
    </div>
    <p><!-- things --></p>
</div>

.mywell{
   height: 150px;
}
.myfloater {
    line-height: 150px;
}
.vcenter{
    vertical-align: middle;
}

活生生的例子：http://jsfiddle.net/Sherbrow/wxM5Z/2/

编辑

将line-height应用于浮动元素会更好。

【讨论】：

【解决方案2】：

也许这就是你需要的：jsfiddle。

我添加了新类，以免覆盖默认引导程序。

【讨论】：