css - .well 类中的垂直居中 Bootstrap btn

Question

我有一个链接，我想在 Bootstrap 框架的 .well 类中垂直居中，并在 anchor 标记上使用类 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>

Answer 1

看来您不应该(或根本不能)垂直对齐 float 元素。

这是我的建议:

<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 应用于 float 元素会更好。