Bootstrap 3 / CSS: How to properly vertically alig

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.

Can someone tell me how to 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>

Many thanks in advance, Tim.

Answer 1

I have a working fiddle of this and can't find your issue. Could you look over this and check the result is what you intended please.

I've only copied out the code from Bootstrap documentation in order to get this far, but am struggling to see if the issue is resolved as I'm not sure how to replicate your problem.

Visit 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;
  }

Answer 2

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;
}