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


Tags: html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment

Problem :

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.



Solution :

enter image description here

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

    CSS Howto..

    How can I use css files in django?

    How to make a basic event calendar with javascript, jquery, html and css?

    How to style a credit card expiration date input field to include spaces and forward slash?

    Show pseudo element between elements

    Background hover showing in CSS

    How to change value stylesheet_url in wordpress?

    How to wrap text in a element in IE

    CSS: How to align vertically a “label” and “input” inside a “div”?

    How can I load css file in Meteor for just one page?

    Adding some automatic versioning to CSS files. How come I'm not able to pull assembly info?

    How to change the CSS of the active toggle button using pseudo CSS transitions

    How to move box-shadow?

    How to make a tetrahedron?

    How to set align of elements to center with css?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to select -webkit-filter: drop-shadow with jQuery?

    How can I make this section of my webpage responsive? [closed]

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to use several css classes to one element?

    How do I create a fallback for the HTML5 search cancel button in webkit?

    How to make elements appear one by one using css animation

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    Give a box an ID, once clicked shows alert of that ID?

    How to give the a specific background color in CSS?

    How to Display a div on mouse-over using jquery ?

    How do I size an image to fit inside another image? [closed]

    How to make this character to be placed at the right side of its container?

    How can I fit images in full height columns in Bootstrap?

    toggle show/hide for hidden menu buttons (responsive)

    How to take an element over to given padding with CSS