Bootstrap 3 / CSS：如何在面板标题中正确垂直对齐

Question

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

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

我的猜测是，这是由于＆＃34;拉右＆＃34;虽然这是一个官方的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

DEMO：http://jsbin.com/yowis/2/edit

<div class="panel-heading clearfix">

这将清除浮动问题。这就是问题所在。

如果你想要文字和图像：

<div class="panel-heading clearfix">

，CSS是：

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

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

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

Answer 2

我有一个工作小提琴，无法找到你的问题。 你能看一下这个并检查结果是你想要的吗。

我只是从Bootstrap文档中复制出代码才能实现这一目标，但我很难看到问题是否得到解决，因为我不确定如何复制你的问题。

访问http://jsfiddle.net/showcaseimagery/jbvbojy0/

<强> HTML

<div class="panel panel-primary">
    <div class="panel-heading">
        Categories
        <span class="pull-right"><a href="#"><img src="http://placehold.it/32x32"></a></span>
    </div>
    <div class="panel-body">
        this is panel body
    </div>
</div>

<强> CSS

 img {
    height:32px;
    width:32px;
    margin-top:-7px;
  }