bootstrap 3 button group in panel-header not centering - html

Question

I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
here's the HTML:
<div class="panel panel-default">
<div class="panel-heading">
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
<div class="panel-body">
test
</div>
<div class="panel-footer">
test
</div>
</div>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.

Answer 1

You should add the class pull-right to your .btn-group div, instead of specifying float:right.
When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/

Answer 2

You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.

Answer 3

add
.container{
line-height:2.2;
}
along with what David has suggested above to have the text truly in the center vertically.
check fiddle

Answer 4

I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
.panel-heading {
overflow: hidden;
}
and using:
<div class="pull-right">
here you are the example: Jsfiddle example

Answer 5

You can use a trick for that ;)
...
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
<div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
...
Good luck - S.M. Mousavi

Answer 6

I solved this issue for myself today. All of the seemingly-working suggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
If you look at #ithcy's answer, and jack up the font-size, you have a problem (demo).
The more googling I did, the more I became convinced that CSS's vertical-align was what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaris that better explained what vertical-align is,
The vertical-align property can be broken down into three
easy-to-understand steps:
It only applies to inline or inline-block elements
It affects the
alignment of the element itself, not its contents (except when applied
to table cells)
When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
and more importantly is not:
The common misconception about vertical-align is that, when it’s
applied to an element, it will make all the elements inside that
element change their vertical position.
My solution was to use CSS table formatting (which is what vertical-align is for, after all) instead of the floats that Bootstrap provides with pull-left and pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
HTML
<div class="panel-heading table-style">
<span class="panel-title">Member of...</span>
<div class="button-wrap">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
</div>
CSS
.panel-heading.table-style {
display: table;
width: 100%;
}
.panel-heading.table-style .panel-title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.panel-heading.table-style .button-wrap {
display: table-cell;
vertical-align: middle;
text-align: right;
}
I made a demo of the way I'm using it, which I'm sure can be improved on.
I am very aware that the btn-group has a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.

Answer 7

It's very late, but I simply solve by this css:
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}