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

Question

I use Bootstrap 3 to create panels with a structure like the below and would like to vertically align the span within the panel heading and without extending the default height of the panel heading.

I tried different approaches (adding class="clearfix", adding style="vertical-align:middle !important;" adding style="overflow:hidden !important;" etc.) but they are all either ignored or they increase the default height of the panel heading.

My guess is that this is due to the "pull-right" class but as this is an official Bootstrap class I hope there is some workaround for this.

How can I achieve this? (The image I use within the link is only 32x32 so its height is less than the height of the panel heading.)

Example panel:

<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">

This will clear the float issue. That's what the issue is.

If you want both the text and the image:

<div class="panel-heading clearfix">

and the CSS is:

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

If you don't want to add clearfix, put this anywhere in your css:

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