Bootstrap 3 / CSS: How to properly vertically align in panel heading
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;
}
user2571510
Updated on June 04, 2022Comments
-
user2571510 almost 2 years
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"
, addingstyle="vertical-align:middle !important;"
addingstyle="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>