html - Bootstrap 3/CSS : How to properly vertically align in panel heading

Question

我使用 Bootstrap 3 创建具有如下结构的面板，并希望垂直对齐面板标题内的跨度，而不扩展面板标题的默认高度。

我尝试了不同的方法(添加 class="clearfix"，添加 style="vertical-align:middle !important;" 添加 style="overflow :hidden !important;" 等)，但它们要么被忽略，要么增加面板标题的默认高度。

我的猜测是，这是由于“向右拉”类造成的，但由于这是一个官方的 Bootstrap 类，我希望对此有一些解决方法。

我怎样才能做到这一点？ (我在链接中使用的图像只有 32x32，所以它的高度小于面板标题的高度。)

示例面板:

<div class="panel panel-primary">
    <div class="panel-heading">
        Categories
        <span class="pull-right"><a href="#"><img src='images/icons/myImage.png' alt='' /></a></span>
    </div>
    <div class="panel-body">
        // ...
    </div>
</div>

Answer 1

演示:http://jsbin.com/yowis/2/edit

<div class="panel-heading clearfix">

这将解决 float 问题。这就是问题所在。

如果您同时想要文本和图像:

<div class="panel-heading clearfix">

CSS 是:

.panel-heading {line-height:32px;}

如果您不想添加 clearfix，请将它放在您的 css 中的任何位置:

.panel-heading:before {
  content: " ";
  display: table;
}
.panel-heading:after {
  clear: both;
}